Appliness #17 – August 2013

8/22/2019 Appliness #17 August 2013

1/139


2/139

appliness TUTORIALS CSS BOOKMARK / SHARE / TO

CSS Regions:New Working Draft

by Radu Stavila


3/139

UTORIALSCSS REGIONS: NEW WORKING DRAFT

by RaduStavila

2 of 3

On May 28th 2013, we published a new W3C working draftfor CSS Regions, one ofthe features proposed by the Adobe Web Platform team. Here are the most importantchanges you should be aware of:

Renamed the region-overfowproperty to region-fragmentThe old region-overfowproperty, which controlled the behaviour of the last region

in the region-chain, was renamed to region-fragmentto make it clear it doesntchange overflow behavior, but rather fragmentation. Its functionality has not changed.

Named flow eventsWe refined the events generated by named flows, to make them more clear and givedevelopers better control over the timing of their event handlers. Heres what changed:

Added the regionoversetchangeeventThe regionoversetchangeevent is dispatched if the value of the regionOverset

property changes for any of the regions in the region chain, including the case whenregions are added or removed from the chain.Most uses of the regionlayoutupdateevent were to track how the named flow fitsin the region chain. This new event should be used for these cases now.

Added the regionfragmentchangeeventThe regionfragmentchangeevent is dispatched on any change to a named flowsfragmentation through its region chain, including changes to any overset fragment.This event is not yet implemented in WebKit or Blink but we will be adding it in the

future.

Removed the regionlayoutupdateeventThe regionlayoutupdateevent has been removed from the Regions spec and willbe removed from WebKit and Blink around mid-August 2013.Make sure to update your code to use the new regionoversetchange event instead ofit.

We published a newW3C working draft for CSS

Regions.
http://www.w3.org/TR/2013/WD-css3-regions-20130528/http://html.adobe.com/webplatform/layout/regions/http://www.w3.org/TR/2013/WD-css3-regions-20130528/%23the-region-fragment-propertyhttp://www.w3.org/TR/2013/WD-css3-regions-20130528/%23named-flow-eventshttp://www.w3.org/TR/2013/WD-css3-regions-20130528/%23dom-region-regionoversethttp://www.w3.org/TR/2013/WD-css3-regions-20130528/%23dom-region-regionoversethttp://www.w3.org/TR/2013/WD-css3-regions-20130528/%23named-flow-eventshttp://www.w3.org/TR/2013/WD-css3-regions-20130528/%23the-region-fragment-propertyhttp://html.adobe.com/webplatform/layout/regions/http://www.w3.org/TR/2013/WD-css3-regions-20130528/


4/139

UTORIALSCSS REGIONS: NEW WORKING DRAFT

Defined offsetParentinteractionThe offsetParentalgorithm was updated for elements inside named flows sothat, if no valid offset parent is found within the named flow, the body elementis returned. This of course has a direct effect on all offset values: offsetTop,offsetLeft, offsetWidthand offsetHeight.

All these changes (except for the removal of the regionlayoutupdateeventand the addition of the regionfragmentchangeevent) are already available foryou to test in WebKit Nightlyand Chrome Canary.

For a complete list of all updates in this new version of the Regions working draft,please see the change log.

Radu StavilaAdobe Web Platform Team

HISBLOG

TWITTER

SHARE

GITHUB
http://www.w3.org/TR/2013/WD-css3-regions-20130528/%23cssomview-offset-attributeshttp://nightly.webkit.org/https://www.google.com/intl/en/chrome/browser/canary.htmlhttp://www.w3.org/TR/2013/WD-css3-regions-20130528/%23changes_from_Aug_28_2012http://blogs.adobe.com/http://blogs.adobe.com/http://blogs.adobe.com/https://twitter.com/adobewebhttps://twitter.com/adobewebhttp://blogs.adobe.com/http://www.w3.org/TR/2013/WD-css3-regions-20130528/%23changes_from_Aug_28_2012https://www.google.com/intl/en/chrome/browser/canary.htmlhttp://nightly.webkit.org/http://www.w3.org/TR/2013/WD-css3-regions-20130528/%23cssomview-offset-attributes


5/139

appliness TUTORIALS JAVASCRIPT BOOKMARK / SHARE / TO

The Future ofJavaScript...Now!

by Joe Zimmerman


6/139

UTORIALSTHE FUTURE OF JAVASCRIPT...NOW!

by JoeZimmerman

2 of 8

JavaScript has come a very long way in the pastdecade. What was previously known as a hobbylanguage for throwing silly tricks like imagerollovers and mouse cursor trails onto web pageshas become the most widely used programminglanguage on the most widely accessed platform:the Internet. JavaScript has gone from an extrathing you tack onto your page at the end to beinga requirement for nearly every web project. Butits popularity doesnt mean the language is great.In fact, as more and more people use JavaScript,

we become more aware of its quirks and problems. JavaScript must evolve, and itis in the process of doing so, but until the ECMAScript 6standard is finalized andall major browsers support its new features, were still stuck with ES5 or are we?

As you read this, you can already write your code using the to-be-finalized ES6standard and still have your code run on all major browsers. How? Transpiling.Transpiling is the process of compiling code from one language into the code ofanother language, which in this instance means from ES6 to ES5. This isnt the onlyoption, though. I will be discussing two other languages that transpile into JavaScriptthat you can start using today: CoffeeScript and TypeScript. There are numerousother languages that you can use, including C++ in some scenarios, but I wont bediscussing them here.

ECMAScript 6 (or ES6 for short) is the next version of JavaScript that is in the works.Its the first large revision that JavaScript has had in a very long time. There are aplethora of new features, many of which are just syntactic sugar, which just meansthat the feature allows us to do the same things weve always done except with amuch cleaner, more concise syntax. For instance, there is the new `class` construct.

ECMASCRIPT 6

Transpiling is the processof compiling code from one

language into the code oanother language.
http://wiki.ecmascript.org/doku.php%3Fid%3Dharmony:specification_draftshttp://wiki.ecmascript.org/doku.php%3Fid%3Dharmony:specification_drafts


7/139


Take a look at a code sample:

class ChildClass extends ParentClass { constructor() { // Initialization super(); // Call super class functions

}

someMethod(arg) { // Do something you lazy bum }}

While the above example still uses prototypal inheritance behind the scenes, iteliminates the mess of code that is required for some of the features. Notice we

are extending a parent class simply by saying that ChildClass extends ParentClass`.This is the same as ChildClass.prototype = new ParentClass()` except more conciseand doesnt require an instantiation of `ParentClass`, which avoids potential sideeffects from the computations within the `ParentClass` constructor.

Also, you can see that I called `super()` in my constructor. The ability to call theparent class functions like this is not nearly as simple as it should be with ourcurrent inheritance syntax limitations, but ES6 makes it extremely simple with thislittle bit of syntactic sugar. Many people have argued that we shouldnt have this

`class` construct because it makes JavaScript appear to have classical inheritance,which is quite different from the prototypal inheritance running behind the sceneshere. But a developer needs to be able to work quickly and the overhead associatedwith the current prototypal syntax slows us down. Its the developers responsibilityto know how the language works as much as possible.

ES6 brings to the table several syntactic sugar features like this and some otherwonderful features, such as let`, which replaces the `var` keyword to give a variableblock scope (rather than function scope).

There are plenty of postsabout the new featurescoming in ES6, so if youre curious,check them out. Many features are only useful in certain situations, but theyll likelycome in handy for you at some point.

3 of 8
http://www.2ality.com/2012/11/guide-esnext.htmlhttp://addyosmani.com/blog/ecmascript-6-resources-for-the-curious-javascripter/http://addyosmani.com/blog/ecmascript-6-resources-for-the-curious-javascripter/http://addyosmani.com/blog/ecmascript-6-resources-for-the-curious-javascripter/http://www.2ality.com/2012/11/guide-esnext.html


8/139


TypeScript is a language by Microsoft. Whatever your feelings to the big M

might be, you should still at least take a quick look at TypeScript. TypeScript is asuperset of JavaScript, which means that you can write regular JavaScript if youwant and itll work. TypeScript adds plenty of features though. First off, it inheritsall of the ES6 features, so its not just a superset of the current JavaScript, but alsoof the future version of JavaScript.

Figure 1: Type Hints in Action

The other big feature that it gives you is interfaces and type declarations (hencethe Type in the language name). The entire point of this is to help with buildinglarger applications by allowing your IDE to know what types should be used andgive you type hints and warnings when you use the wrong types. Those comingfrom strongly-typed languages will appreciate this feature.

TYPESCRIPT

4 of 8


9/139


I think that my favorite part about TypeScripts implementation of this feature is thatits completely transparent once its been compiled back to JavaScript. The typesare used solely during development to make sure you dont make any mistakes.Once the code is transpiled, theres no evidence that you were checking for typesat all, not even duck-typingchecks. This keeps the code short and clean. In the

code sample below, you can see what I mean:

/* Heres a simple bit of TypeScript */class Greeter { private greeting;

constructor(greeting: string) { // : string limits the arguments tostrings this.greeting = greeting; } greet() {

returnHello, + this.greeting; }}

vargreeter = new Greeter(world);

/* Heres the compiled JavaScript */varGreeter = (function() { functionGreeter(greeting) { // Notice no type limitations this.greeting = greeting; }

Greeter.prototype.greet = function() { returnHello, + this.greeting; }; returnGreeter;})();vargreeter = new Greeter(world);

Microsoft has also created several plugins for code editors and IDEs that give themthe ability to understand TypeScript so you can have type hints in your favoriteeditor and be able to compile to JavaScript without the command-line.

Theres plenty to explore so check out their website, use their online IDE calledthe Playground to practice and test it out yourself, and read their lengthy, butpretty clear documentation.

5 of 8
http://stackoverflow.com/questions/3379529/duck-typing-in-javascript/3379721%233379721http://www.typescriptlang.org/http://www.typescriptlang.org/Playground/http://www.typescriptlang.org/Content/TypeScript%2520Language%2520Specification.pdfhttp://www.typescriptlang.org/Content/TypeScript%2520Language%2520Specification.pdfhttp://www.typescriptlang.org/Playground/http://www.typescriptlang.org/http://stackoverflow.com/questions/3379529/duck-typing-in-javascript/3379721%233379721


10/139


CoffeeScript borrows a lot of its philosophy from Ruby. It tries to do away withunnecessary syntax such as semi colons and parentheses (as often as possible). Backduring the big Semicolon Debate, CoffeeScript added fuel to the arguments of

those on the side that declared semicolons were pointless.

If youre one of the people who want JavaScript except possibly more powerful CoffeeScript isnt for you. If youre one of the people who hates JavaScript andall of its quirks, this is probably your best alternative, especially if you prefer syntaxto get out of the way and let you work.

CoffeeScript comes with a plethora of interesting and awesome features. Just takea look at the Overview section on the home page and youll find several things

standing out, such as: postfix conditionals, arrow functions, meaningful whitespace,splatsand more.

Some of these features are actually showing up in ES6, but CoffeeScript is oftenheralded as the reason ES6 has decided to add the features. Before languages thattranspiled to JavaScript existed, JavaScripts real competition had been practicallyzero, but now, in large part due to CoffeeScript, were seeing more diversity, whichis pushing the innovation of JavaScript. Even though Im not personally a fan ofCoffeeScripts lack of syntax, Im very grateful for what it has done for JavaScript.

Each of the languages mentioned above offer a lot to developers for improvingthe development experience of web applications. Personally, Im excited abouteach of these projects and I hope each one continues to become even better. Butuntil these languages are supported natively in all major browsers (I wouldnt counton anything other than ES6 obtaining that support), we still need to convert thiscode to usable JavaScript.

Each language has its own compiler(s):

ECMAScript 6: traceur, ES6 Module Transpiler(for converting ES6 modules toAMD or CommonJS modules)

TypeScript: TypeScript Compiler CoffeeScript: CoffeeScript Compiler

COFFEESCRIPT

TRANSPILING TO JAVASCRIPT

6 of 8
http://www.joezimjs.com/javascript/the-great-semicolon-debate/http://coffeescript.org/%23conditionalshttp://coffeescript.org/%23literalshttp://coffeescript.org/%23splatshttps://code.google.com/p/traceur-compiler/http://square.github.io/es6-module-transpiler/http://www.typescriptlang.org/%23Downloadhttp://coffeescript.org/%23installationhttp://coffeescript.org/%23installationhttp://www.typescriptlang.org/%23Downloadhttp://square.github.io/es6-module-transpiler/https://code.google.com/p/traceur-compiler/http://coffeescript.org/%23splatshttp://coffeescript.org/%23literalshttp://coffeescript.org/%23conditionalshttp://www.joezimjs.com/javascript/the-great-semicolon-debate/


11/139


Each of the tools just listed also has the ability to generate source maps, whichallow you to debug using the code in the language you wrote it in, instead ofbeing required to debug the compiled JavaScript code. Check out each projectsdocumentation to find out how to generate source maps with them.

If you love the idea of using the features of these languages but hate the idea ofgoing to the command-line and compiling the code each time you make a change,theres a solution for you: Grunt. Chances are, youve heard of Grunt by now andmay have even used it. If youve never heard of it before or used it, their GettingStarted guideis pretty helpful.

I wont be going into any details on how to use Grunt, but I will tell you that youcan set Grunt to watch for changes to your files and immediately compile themafter theyre saved. Most of these Grunt plugins can also add source maps (Iveindicated the ones that dont currently have the capability).

ECMAScript 6: grunt-traceur(no source maps), grunt-es6-module-transpiler(nosource maps)

TypeScript: grunt-typescript CoffeeScript: grunt-contrib-coffee

Just check out the documentation, install the Grunt plugins (and Grunt too, ofcourse), configure, and youre on your way to writing awesome code.

Ive only mentioned a few languages here that are pushing web development tonew heights, but there are several others. Dart, which was developed by Google,is a language that Google plans to integrate directly into Chrome, but it also wasdesigned from the beginning to be able to compile down to JavaScript.

Other languages that have existed for a long time are also starting to be compiledto JavaScript, such as Java and C++. WebGL has allowed 3D games to becomefeasible and Mozilla has been working hard to allow developers to create games inC++ and convert them to JavaScript. For an example of what is possible, check outthis demo game that was created in C++ but running in the browser: BananaBread.

INTEGRATE INTO YOUR WORKFLOW WITH GRUNT

OTHER LANGUAGES

7 of 8
http://www.thecssninja.com/javascript/source-mappinghttp://gruntjs.com/http://gruntjs.com/getting-startedhttp://gruntjs.com/getting-startedhttps://npmjs.org/package/grunt-traceurhttps://npmjs.org/package/grunt-es6-module-transpilerhttps://npmjs.org/package/grunt-typescripthttps://npmjs.org/package/grunt-contrib-coffeehttp://www.dartlang.org/https://developer.mozilla.org/en-US/demos/detail/bananabreadhttps://developer.mozilla.org/en-US/demos/detail/bananabreadhttp://www.dartlang.org/https://npmjs.org/package/grunt-contrib-coffeehttps://npmjs.org/package/grunt-typescripthttps://npmjs.org/package/grunt-es6-module-transpilerhttps://npmjs.org/package/grunt-traceurhttp://gruntjs.com/getting-startedhttp://gruntjs.com/getting-startedhttp://gruntjs.com/http://www.thecssninja.com/javascript/source-mapping


12/139


All-in-all, the future of web development, and JavaScript in general, looks bright.

Even if developers dont like JavaScript, they can still code for the web. And withall the tools coming out, development is getting faster and more automated, too.Were all lucky to be witnessing this era in web development and I suspect thefuture will be even better.

CONCLUSION

Joe ZimmermanWeb Developer

HISBLOG

TWITTER

SHARE

GITHUB
http://www.joezimjs.com/http://www.joezimjs.com/http://www.joezimjs.com/https://twitter.com/JoeZimJShttps://github.com/joezimjs/https://github.com/joezimjs/https://twitter.com/JoeZimJShttp://www.joezimjs.com/


13/139

appliness TUTORIALS JAVASCRIPT BOOKMARK / SHARE / TO

Soma.js - Your Way

Out of ChaoticJavaScript

by Romuald Quantin


14/139

UTORIALSSOMA.JS - YOUR WAY OUT OF CHAOTIC JAVASCRIPT

by RomualdQuantin

2 of 29

This story first appeared in Flippin Awesome on July 15, 2013.

A scalable application has the ability to grow in a capable manner. Applications oftenstart small but also grow very quickly. Sometimes applications need to be entirelyrewritten as they grow and become unmanageable.

Coding with scalability in mind, prevents problems down the line. This article focuseson how to write JavaScript functions that are independent, making it possible forcomponents to be added, removed, enhanced, refactored, and interchanged with aminimal impact on other components. But also, well discuss how to write code that istestable, maintainable, debuggable and intuitive.

Well use the soma.jsframework to demonstrate how vanilla JavaScript can be writtenin a manner that allows maintainability and scalability.

Programming is an art form that fights back. Chad Z. Hower

soma.js is a JavaScript framework that provides tools to create a loosely-coupledarchitecture broken down into smaller pieces. Success in building large-scale applicationsrelies on smaller single-purposed parts of a larger system.

soma.js is not tied to a specific architecture pattern. The framework can be used asa model-view-controlleror MV* framework, where actors called models representthe state of the application, and actors called views display information. But soma.jscan also be used to manage independent modules, create standalone widgetsor anyother architecture.

Basically, soma.js allows developers to be kind to their future selves, by writing codewhich solves todays problems in a way that is easily changed or easily adapted, in aweeks or even a years time.

WHAT IS A SCALABLE APPLICATION?

WHAT IS SOMA.JS?

Coding with scalability inmind, prevents problems

down the line.
http://flippinawesome.org/2013/07/15/soma-js-your-way-out-of-chaotic-javascript/http://somajs.github.io/somajs/%23/http://somajs.github.io/somajs/%23/http://en.wikipedia.org/wiki/Model%25E2%2580%2593view%25E2%2580%2593controllerhttp://en.wikipedia.org/wiki/Model_View_ViewModelhttp://addyosmani.com/resources/essentialjsdesignpatterns/book/%23modulepatternJavaScripthttps://en.wikipedia.org/wiki/Web_widgethttps://en.wikipedia.org/wiki/Web_widgethttp://addyosmani.com/resources/essentialjsdesignpatterns/book/%23modulepatternJavaScripthttp://en.wikipedia.org/wiki/Model_View_ViewModelhttp://en.wikipedia.org/wiki/Model%25E2%2580%2593view%25E2%2580%2593controllerhttp://somajs.github.io/somajs/%23/http://somajs.github.io/somajs/%23/http://flippinawesome.org/2013/07/15/soma-js-your-way-out-of-chaotic-javascript/


15/139


Lets imagine a common scenario whereby component A needs a component

B in order to function, meaning it has a direct dependency to it. Code thatcontains components that are dependent on nearly everything else is referred toas highly-coupled code. The result is an application that is hard to maintain, withcomponents that are hard to change without impacting other portions of the code.

Couplingcan make a great difference in a developers daily work. It can mean thedifference between ease of developing and a struggle;between solving a problemin five minutes versus five hours. It is a very important matter, accepted andunderstood by developers in many languages, though not always in the JavaScript

world.

Coupling or dependency is the degree to which each program modulerelies on each one of the other modules

To enable a system to grow and be maintainable, its parts must have a very limitedknowledge of their surroundings. The components must not be tied to eachother. A structure that follows the Law of Demetermakes its entities reusable andinterchangeable, allowing the system to scale up.

The solution is very simple in theory, but very hard in practice: writing componentsthat are self-contained and encapsulated and dont know about other components,reducing the dependency they have to each other.

A design pattern is a general, reusable solution to a commonly occurringproblem.

Reducing dependencies brings another problem: how to communicate betweencomponents without them to know about each other. This is where design patternscan help. soma.js is a set of tools and design patterns solutions to build a longterm architecture that is decoupled and easily testable. The tools provided by theframework are dependency injection, observer pattern, mediator pattern, facadepattern, command pattern, OOPutilities and a DOM manipulation template engineas an optional plugin.

THE COUPLING PROBLEM

3 of 29
http://en.wikipedia.org/wiki/Coupling_%28computer_programming%29http://en.wikipedia.org/wiki/Coupling_%28computer_programming%29http://en.wikipedia.org/wiki/Law_of_Demeterhttp://en.wikipedia.org/wiki/Software_design_patternhttp://en.wikipedia.org/wiki/Dependency_injectionhttp://en.wikipedia.org/wiki/Observer_patternhttp://en.wikipedia.org/wiki/Mediator_patternhttp://en.wikipedia.org/wiki/Facade_patternhttp://en.wikipedia.org/wiki/Facade_patternhttp://en.wikipedia.org/wiki/Command_patternhttp://en.wikipedia.org/wiki/Object-oriented_programminghttp://en.wikipedia.org/wiki/Object-oriented_programminghttp://en.wikipedia.org/wiki/Command_patternhttp://en.wikipedia.org/wiki/Facade_patternhttp://en.wikipedia.org/wiki/Facade_patternhttp://en.wikipedia.org/wiki/Mediator_patternhttp://en.wikipedia.org/wiki/Observer_patternhttp://en.wikipedia.org/wiki/Dependency_injectionhttp://en.wikipedia.org/wiki/Software_design_patternhttp://en.wikipedia.org/wiki/Law_of_Demeterhttp://en.wikipedia.org/wiki/Coupling_%28computer_programming%29http://en.wikipedia.org/wiki/Coupling_%28computer_programming%29


16/139


Dependency injection allows the removal of hard-coded dependencies

and makes it possible to change them.

Dependency injection is an antidote for highly-coupled code. The cost required towire objects together falls next to zero.

A common dependency injection system has a separate object (an injector, oftencalled container), that instantiates new objects and populates them with what theyneed: the dependencies. Dependency injection is also a useful pattern to solvenested dependencies, as they can chain and be nested through several layers of

the application.

The benefits of dependency injection are:

More re-usable components; Improved code maintenance; More testable components (mocking object); More readable code (reduction of boilerplate code).

Dependency injection involves a way of thinking called the Hollywood principledont call us, well call you. This is exactly how it works in soma.js. Entities ask fortheir dependencies using properties and/or constructor parameters.

Using dependency injection implies creating rules, so the injector knows whatand how to populate the instances. These are called mapping rules. A rule issimply mapping a name (string) to an object (string, number, boolean, function,object, and so on). These mapping names are used to inject the correspondingobjects in either a JavaScript constructor or a variable.

For more information, feel free to refer to the full documentation on soma.jsdependency injection.

DEPENDECNY INJECTION

4 of 29
http://en.wikipedia.org/wiki/Hollywood_principlehttp://somajs.github.io/somajs/site/%23dependency-injectionhttp://somajs.github.io/somajs/site/%23dependency-injectionhttp://somajs.github.io/somajs/site/%23dependency-injectionhttp://somajs.github.io/somajs/site/%23dependency-injectionhttp://en.wikipedia.org/wiki/Hollywood_principle


17/139


A mediator is a behavioral design pattern that is used to reduce dependencies. It

promotes loose coupling by keeping objects from explicitly referring to each other.It is an object that represents another object (or a set of objects). The communicationbetween objects are encapsulated within the mediators rather than the objectsthey represents, thus reducing coupling.

A mediator in soma.js is frequently used to represent a view object or a DOMelement, but can be used to represent anything. A mediator reacts to events anduses the reference to the represented object to update its state.

An object represented by a mediator provides a public API, a set of public methods.In the following example, the view provides an update method.

functionView = function() {

};View.prototype.update = function(data) { // update the view with some data};

The mediator receives a target as an argument that is the reference to theview. The mediator and can listen to events to update the view, removing thecommunication from the view and reducing the coupling.

functionMediator = function(target) { // target is the object represented: an instance of View // target.update(data) can be used when an event occurs};

WHAT IS A MEDIATOR?

5 of 29


18/139


The following application is composed of three buttons, which create three differentclocks on the screen: digital, analog and polar. Different design patterns are used

to ensure that our elements, and at least the views and model, are reusable outsideof this project. Over the following sections, we will walk through how this applicationis built.

See the clock application demo in action.

Note: the application does not work on browsers that dont support querySelector.This was done intentionally to keep the code as simple as possible.

Planning and decomposing a task in different parts is a very important step inwriting code. In the following exercise, there are two differents types of functions:

functions that have no dependencies (ideally all models and views so that theyare reusable);

functions that remove dependencies from others.

A SAMPLE APPLICATION USING SOMA.JS

PLAN AND DECOUPLE ELEMENTS

6 of 29
http://soundstep.github.io/somajs-flippin-clock-app/https://developer.mozilla.org/en-US/docs/Web/API/document.querySelectorhttp://soundstep.github.io/somajs-flippin-clock-app/https://developer.mozilla.org/en-US/docs/Web/API/document.querySelectorhttp://soundstep.github.io/somajs-flippin-clock-app/


19/139


The application contains these different entities:

An application instance that is the starting point and bootstraps our applicationpreparing what is needed. It receives a DOM Element as a parameter, so the

application has no hard DOM references. Its role is defining dependencies andcreating elements.

/js/app/clock.js (ClockDemo) A model that holds the application state (the time). Its role is delivering the time

information needed so that the views can display the current time. /js/app/models/timer.js (TimerModel) Three clock views that represent a DOM Element. All views implement the same

interface so they receive the time information in the same way. Their role isshowing a clock on the screen, each one in a different way.

/js/app/views/clocks/analog/analog.js (AnalogView) /js/app/views/clocks/digital/digital.js (DigitalView) /js/app/views/clocks/polar/polar.js (PolarView) A mediator that represents a DOM element. Its role is destroying and creating

clocks. It also links the timer model to the view so it can receive the time. Themediator encapsulates the communication and removes the dependencies fromboth the models and the view.

/js/app/mediators/clock.js (ClockMediator) A selector view that represents the three buttons used to create different clocks.

Its role is dispatching a user event to inform the interested elements that theyneed to remove the current clock and create a new one.

/js/app/views/selector.js (SelectorView)

Clock application source code on github

7 of 29
https://github.com/soundstep/somajs-flippin-clock-apphttps://github.com/soundstep/somajs-flippin-clock-app


20/139


Below you can see what the file structure should look like as well as an illustrationrepresenting the architecture of the application.

8 of 29


21/139


Interfaces dont exist in the JavaScript language as they do in Java or other

languages. However their concept can be easily applied, if not enforced.

An interface is simply a description of a list of public methods and properties.This description acts a contract applied to instances so the application knows theycan respond to a signature. A function that implements an interface needs toimplement all the methods of this interface.

Interfaces solve many problems associated with code reuse in object-orientedprogramming. It is a programming discipline that is based on the separation of the

public interface (API) from the real implementation.

Some strict JavaScript supersets such as Typescripthave interfaces. As an example,the interface of a car function could look like this:

interface ICar { engine: IEngine; basePrice: number; state: string; make: string; model: string; year: number;}

class Car implements Icar { // must implement the ICar signature in this class}

In JavaScript, interfaces are not a built-in feature of the language, but severalfunctions can be written to implement the same signature.

A developer should think about what are the interfaces for the reusable elementswithin the application. For example, in the clock application, clock views must beinterchangeable and provide the exact same methods so they can be swapped outwithout modifying other elements.

THINKING WITH INTERFACES

9 of 29
http://en.wikipedia.org/wiki/Application_programming_interface%23API_in_object-oriented_languageshttp://msdn.microsoft.com/en-us/library/aa260635%28v%3Dvs.60%29.aspxhttp://www.typescriptlang.org/http://blog.pluralsight.com/2013/02/12/the-role-of-interfaces-in-typescript/http://blog.pluralsight.com/2013/02/12/the-role-of-interfaces-in-typescript/http://www.typescriptlang.org/http://msdn.microsoft.com/en-us/library/aa260635%28v%3Dvs.60%29.aspxhttp://en.wikipedia.org/wiki/Application_programming_interface%23API_in_object-oriented_languages


22/139


The interfaces of the timer model and the clock views could look like this:

interface ITimerModel { add(callback: function); remove(callback: function); update();}

interface IClockView { update(time: Object); dispose();}

The below diagram shows the different interfaces implemented in the clock

application:

10 of 29


23/139


The first step to build a soma.js application is to create an application instance. This

is the only moment a framework function has to be extended, all the other entitiescan be re-usable vanilla JavaScript functions, and can be framework agnostic.

The application instance executes two functions so the application can be setupwith the architecture needed: the initand startfunctions.

(function(clock, soma) {

varClockDemo = soma.Application.extend({ init: function() {

}, start: function() {

} });

varclockDemo = new ClockDemo();

})(window.clock = window.clock || {}, soma);

For more information, read the full soma.js documentation on the applicationinstance.

THE APPLICATION INSTANCE

11 of 29
http://somajs.github.io/somajs/site/%23application-instancehttp://somajs.github.io/somajs/site/%23application-instancehttp://somajs.github.io/somajs/site/%23application-instancehttp://somajs.github.io/somajs/site/%23application-instance


24/139


It is a good practice to use a DOM Element as the root within the application. This

is useful to self-contain the application. Any DOM selections and manipulationsshould start from this reference.

Using CSS selectors with id rather than class is generally a bad idea. Theycause the application to have hard dependencies on specific DOM Elements.

varClockDemo = soma.Application.extend({ constructor: function(element) { // store the root DOM Element this.element = element; // call the super constructor soma.Application.call(this); }, init: function() {

}, start: function() {

}});

varclockDemo = new ClockDemo(document.querySelector(.clock-app));

An easy way to test that the application is self-contained is to create many of themon the screen. They all should work independently.

Now that the application has a starting point, the injection mapping rules canbe created. It is a good practice to have them in the same place, but it is not arequirement, should the application needs to create other rules elsewhere.

A mapping rule is nothing more than assigning a function or a value to a string. Thestrings are used as named variables in other places so the injector knows whatto inject.

this.injector.mapClass(timer, clock.TimerModel, true);

A SELF-CONTAINED APPLICATION

INJECTION MAPPING RULES

12 of 29


25/139


This mapping rule lets the injector know that when a timer variable is encountered,an instance of the function clock.TimerModel should be injected. The thirdparameter tells the injector to always inject the same instance and not create anew one.

this.injector.mapClass(face, clock.FaceView);this.injector.mapClass(needleSeconds, clock.NeedleSeconds);this.injector.mapClass(needleMinutes, clock.NeedleMinutes);this.injector.mapClass(needleHours, clock.NeedleHours);

These four mapping rules are required for the analog clock as the elements of theanalog clock have been broken into several views.

this.injector.mapValue(views, {

digital: clock.DigitalView, analog: clock.AnalogView, polar: clock.PolarView});

An object that contains all the different clocks is also created and mapped in theinjector. The clock mediator in charge of creating the clocks uses this object toinstantiate the correct views.

The clock mediator represents the DOM Element in which the clocks are created.The first parameter is the mediator function to instantiate, and the second parameteris the DOM Element it represents. A target variable is injected representing theDOM Element.

Create the mediator using the framework core element mediators:

this.mediators.create(clock.ClockMediator, this.element.querySelector(.clock));

INSTANTIATE THE CLOCK MEDIATOR

13 of 29


26/139


Below is the code for the clock mediator:

(function(clock) { varClockMediator = function(target) {

}; clock.ClockMediator = ClockMediator;})(window.clock = window.clock || {});

The selector view represents the DOM Element that contains the three buttons tocreate the clocks.

(function(clock) { varSelectorView = function() {

}; clock.SelectorView = SelectorView;})(window.clock = window.clock || {});

Finally, a create event is dispatched from the application to create the first clockwithout a user interaction.

this.dispatcher.dispatch(create, analog);

Read the full documentation for more information about events.

INSTANTIATE THE SELECTOR VIEW

CREATE THE FIRST CLOCK

14 of 29
http://somajs.github.io/somajs/site/%23communicationhttp://somajs.github.io/somajs/site/%23communication


27/139


Source code on Github.

(function(clock, soma) {

varClockDemo = soma.Application.extend({ constructor: function(element) { // store root DOM Element this.element = element; // call super constructor soma.Application.call(this); }, init: function() { // mapping rules this.injector.mapClass(timer, clock.TimerModel, true); this.injector.mapClass(face, clock.FaceView); this.injector.mapClass(needleSeconds, clock.NeedleSeconds); this.injector.mapClass(needleMinutes, clock.NeedleMinutes); this.injector.mapClass(needleHours, clock.NeedleHours); this.injector.mapValue(views, { digital: clock.DigitalView, analog: clock.AnalogView, polar: clock.PolarView

}); // create clock mediator this.mediators.create(clock.ClockMediator, this.element.querySelector(.clock)); // create clock selector template this.createTemplate(clock.SelectorView, this.element.querySelector(.clock-selector)); }, start: function() { // dispatch event to create an analog clock this.dispatcher.dispatch(create, analog);

} });

// instantiate clock application with a root DOM Element varclockDemo = new ClockDemo(document.querySelector(.clock-app));

})(window.clock = window.clock || {}, soma);

COMPLETE THE APPLICATION INSTANCE CODE

15 of 29
https://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/clock.jshttps://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/clock.js


28/139


The timer model functions role is to provide the current time to other elements,

without knowing anything about them. Its interface provides two methods: addand remove. They both take a parameter that is a function to send the currenttime to.

(function(clock) { varTimerModel = function() {

}; TimerModel.prototype.add = function(callback) { // register functions

}; TimerModel.prototype.remove = function(callback) { // remove registered functions }; clock.TimerModel = TimerModel;})(window.clock = window.clock || {});

The timer model has no dependencies. It doesnt instantiate other functions and isinterchangeable with other models as long as they implement the same interface(the add and remove functions). For example, another time model that takesthe time from a server could be created and easily swapped out. The other elementsin the application, such as the views and the clock mediator, wouldnt have to bemodified.

The following lines would be the only change required, even if the model is used inseveral places in the application:

varModelFunction = isOnline ? ServerTimeModel : TimeModel;this.injector.mapClass(timer, ModelFunction, true);

Note: dispatching an event to notify components of a time change could havebeen an option rather than using callbacks.


THE TIMER MODEL

16 of 29
https://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/models/timer.jshttps://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/models/timer.js


29/139


The selector views only role is handling a user event. When the user clicks on oneof the buttons, the view catches this click event. A custom event is dispatched

through the framework, the clock mediator listens for it and creates a new clock.

jQuery or vanilla JavaScript could have been used, but, for the puposes of example,the soma-templatetemplate engine (available as a standalone library or soma.jsplugin) is used to listen to the user click event.

Digital clock Analog clock Polar clock

(function(clock) { varSelectorView = function(scope, dispatcher) { scope.select = function(event, id) { dispatcher.dispatch(create, id); }; }; clock.SelectorView = SelectorView;})(window.clock = window.clock || {});

Using events(and commands) is very powerful. They can make changes or addingnew features easier to implement as they can listen for these events withoutinterfering or creating hard dependencies. For example, consider a new featuresuch as a header that shows the current clock name. It would only be a matter oflistening to the same event to update the screen. This makes the application veryscalable.


Check the documentation for more information on soma-template.

THE SELECTOR VIEW

17 of 29
http://soundstep.github.io/soma-template/http://somajs.github.io/somajs/site/%23communicationhttp://somajs.github.io/somajs/site/%23commandhttps://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/views/selector.jshttp://somajs.github.io/somajs/site/%23templatehttp://somajs.github.io/somajs/site/%23templatehttps://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/views/selector.jshttp://somajs.github.io/somajs/site/%23commandhttp://somajs.github.io/somajs/site/%23communicationhttp://soundstep.github.io/soma-template/


30/139


The clock mediators role is to link the timer model to the current clock view. It is

very important as it is what makes the timer model and the clock views completelyreusable and free of framework code. Without it, the application would be highly-coupled as the timer and the views would have a direct relation to each other.

The mediator is allowed to know more about the application, using injectedreferences.

The parameters injected are:

target: represents a DOM Element; dispatcher: the framework core element to listen to the create event; mediators: the framework core element to create mediators; timer: the timer model that hold the current time; views: a list of available clock views to instantiate (key object).

To inject these values into the mediator, the mediator just needs to ask for themusing their names. The injector knows that there are mapping rules for these specificnamed parameters, and sends the right references to the mediator.

(function(clock) { varClockMediator = function(target, dispatcher, mediators, timer, views) {

}; clock.ClockMediator = ClockMediator;})(window.clock = window.clock || {});

The mediator listens to a create event to know when it should destroy the currentclock and create a new one.

dispatcher.addEventListener(create, function(event) { // destroy current clock and create a new one varclockId = event.params;});

THE CLOCK MEDIATOR

18 of 29


31/139


The current clock reference (the view) is stored in a variable, so it be can removedand destroyed before creating a new one.

varcurrentClock;

It is a good practice to make a dispose method available on views, models, orany functions that are meant to be destroyed. The dispose method cleans up theinternal code of these elements.

// destroy previous clockif (currentClock) { timer.remove(currentClock.update); currentClock.dispose();}

To create the new clock, the mediator uses the parameter that has been sent withthe create event, which can be analog, digital and polar. This id is usedas the key for the list of views so the mediator knows which one to create.

The core framework elementmediators is used to instantiate the new clock. Thefirst parameter is the clock function to instantiate, and the second parameter is theDOM Element where the clock is created.

// create clockvarid = event.params;varclockView = views[id];currentClock = mediators.create(clockView, target);

Finally, the timer model is linked to the view. It is important that all the clock viewshave the same interface, an update method receives the time from the model.The view is also updated with the current time immediately, so the screen getsupdated before the next tick (one second tick).

// register clock with timer modeltimer.add(currentClock.update);// update timer immediatelycurrentClock.update(timer.time);

19 of 29
http://somajs.github.io/somajs/site/%23core-elementshttp://somajs.github.io/somajs/site/%23core-elements


32/139


Below is the complete code of the clock mediator.

(function(clock) {

varClockMediator = function(target, dispatcher, mediators, timer, views) {

varcurrentClock;

dispatcher.addEventListener(create, function(event) {

// destroy previous clock if (currentClock) { timer.remove(currentClock.update); currentClock.dispose(); }

// create clock varid = event.params; varclockView = views[id]; currentClock = mediators.create(clockView, target);

// register clock with timer model timer.add(currentClock.update);

// update timer immediately currentClock.update(timer.time);

});

};

clock.ClockMediator = ClockMediator;

})(window.clock = window.clock || {});


Read the full soma.js documentation for more information on mediators.

20 of 29
https://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/mediators/clock.jshttp://somajs.github.io/somajs/site/%23mediatorhttp://somajs.github.io/somajs/site/%23mediatorhttps://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/mediators/clock.js


33/139


Three types of clock views are available in the application:

Analog view (clock.AnalogView); DigitalView (clock.DigitalView); PolarView (clock.PolarView);

As with the timer model, the views are highly reusable because:

They are not aware of the other application elements; They are free of framework code;

They provide a simple API to update their current state.

The views are also interchangeable because they all provide the same interface:

a constructor that receives a DOM Element; an update method that receives the current time.

It would be very easy to take them from this application and reuse them in anotherproject. The application is also scalable as it would be trivial to create new clockswithout changing the code of the different elements in the application.

As an example, here is the structure of the digital clock view.

(function(clock) { varDigitalView = function(target) {

}; DigitalView.prototype.update = function(time) {

}; DigitalView.prototype.dispose = function() {

}; clock.DigitalView = DigitalView;})(window.clock = window.clock || {});

THE CLOCK VIEWS

21 of 29


34/139


Source code on Github:

digital view analog view polar view

DEPENDENCY INJECTION MAP

22 of 29
https://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/views/clocks/digital/digital.jshttps://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/views/clocks/analog/analog.jshttps://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/views/clocks/polar/polar.jshttps://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/views/clocks/polar/polar.jshttps://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/views/clocks/analog/analog.jshttps://github.com/soundstep/somajs-flippin-clock-app/blob/master/js/app/views/clocks/digital/digital.js


35/139


The goal of unit testingis to isolate each part of the application and show that the

individual parts are correct. A unit test provides a strict, written contract that thepiece of code must satisfy. In other words, unit tests are a list of methods that areexecuted to retrieve a list of successes and failures.

Unit testing components is a very important step. The process affords severalbenefits, so many that it is hard to explain and list them all. Unit testing has a directbenefit on the quality of the code but goes beyond that. It also has invaluablebenefits for a developers skills.

Here are just some of the benefits of unit testing:

Improve quality code; Insure that a piece of code work; Insure that a bug has been solved and will not reappear; Insure that new features are not breaking existing ones; Improve feature integration; Find problems early; Testing time improves as it runs fast;

Expose edge cases and make developers think harder on a problem; Force developers to decouple their code so that it is testable; Acts as a knowledge base that grows over time; Work as a type of up-to-date documentation always in sync with the code; Reduce manual testing time; Instant visual feedback that is very rewarding, gives confidence and a sense of

achievement; Helps to understand deeply the design of the code; Helps to find mistakes in public API;

Helps code reuse; Tests can be automated; Tests can run on web hooks (continuous integration).

A question that is often asked is: How many unit tests should I write? Unit testscan be compared to food. Eating too much will get you into trouble, but not eatingenough will probably affect your health as well. A right balance must be foundbetween production code and test code. It comes naturally with experience, and itis very common to constantly jump from production code to unit test code.

UNIT TESTING

23 of 29
http://en.wikipedia.org/wiki/Unit_testinghttp://en.wikipedia.org/wiki/Continuous_integrationhttp://en.wikipedia.org/wiki/Continuous_integrationhttp://en.wikipedia.org/wiki/Unit_testing


36/139


Mocha and Jasmine are a couple of the many available JavaScript unit testing

frameworks. The elements of the clock application are highly testable becausethey are not highly-coupled with others. This is one the benefits of dependencyinjection. Most dependencies can be sent in the instances, in our case using theconstructor. Mockingobjects can easily be created to simulate functionality andtest each element separately.

Tests the clock application in the browser.

See the unit tests source code.

The tests can also run from the command line. The dependencies needs to beinstalled using NPM:

$ npm install$ npm install -g mocha

Run the tests:

$ npm test

Or with mocha directly:

$ mocha -u bdd --reporter spec --timeout 5000 tests/specs/*.jsclock-app-mocha-cli-small

CLOCK APPLICATION TESTS

24 of 29
http://visionmedia.github.io/mocha/http://pivotal.github.io/jasmine/http://en.wikipedia.org/wiki/Mock_objecthttp://soundstep.github.io/somajs-flippin-clock-app/tests/https://github.com/soundstep/somajs-flippin-clock-app/tree/master/testshttps://npmjs.org/https://npmjs.org/https://github.com/soundstep/somajs-flippin-clock-app/tree/master/testshttp://soundstep.github.io/somajs-flippin-clock-app/tests/http://en.wikipedia.org/wiki/Mock_objecthttp://pivotal.github.io/jasmine/http://visionmedia.github.io/mocha/


37/139


Unit tests can be automated; this is called continuous integration. The topic is very

large but as an example, the clock application has been integrated with a servicecalled Travis. The service can run unit tests every time a new piece code is pushedto a Github repository. The developers receive an email if a failure appears, whichensures the sanity of the code on the repository.

See the clock application tests on Travis.

To create a scalable application or to improve an existing one, one must go throughtwo different processes: analysing and solving. More or less answering to thetwo following questions:

What makes an application not scalable? How to make an application more scalable?

There are different ways to find out the level of scalability of an application. The firststep before being able to see the whole picture is to go through all the elementsof the application and ask:

Should this element be reusable? Is this element testable? Does this element have dependencies? Is this element single purposed?

If a reusable element is hardly testable, or handles too many concerns, or has toomany dependencies, there is a big chance that this element should be improved tomake the application more scalable (bad code smells).

CONTINUOUS INTEGRATION

CONCLUSION

WHAT MAKES AN APPLICATION NOT SCALABLE?

25 of 29
http://en.wikipedia.org/wiki/Continuous_integrationhttps://travis-ci.org/https://travis-ci.org/soundstep/somajs-flippin-clock-apphttp://en.wikipedia.org/wiki/Code_smellhttp://en.wikipedia.org/wiki/Code_smellhttps://travis-ci.org/soundstep/somajs-flippin-clock-apphttps://travis-ci.org/http://en.wikipedia.org/wiki/Continuous_integration


38/139


Here is a list of tasks that can be performed to improve reusable elements. Each

improvements will make the whole application more scalable.

Identify elements that are not single-purposed to break them down. Look out for bad code smells to refactor. Avoid code duplication (DRY). Avoid large functions. Avoid anonymous functions. Make a usable public API so it is testable. Avoid instantiating objects, use references using the constructor or setters.

Remove dependencies as much as possible. Use the observer pattern (events) to remove dependencies and send information. Create mediators for the element to remove dependencies and receive

information. Implement clear interfaces as much as you can. Hide or make private concerns that are not relevant to the other elements. Prefer composition over inheritance when possible.

The element is successfully improved when the following is possible:

The element can easily be interchanged with another without breaking theapplication.

The element is easily reusable outside of the project. The element can be successfully unit tested.

In general, identify where bad code smells so the code can be refactored andimproved. This term code smell refers to any symptom in the source code of aprogram that possibly indicates a deeper problem.

HOW TO MAKE AN APPLICATION MORE SCALABLE?

26 of 29
http://en.wikipedia.org/wiki/Code_smellhttp://en.wikipedia.org/wiki/Don%2527t_repeat_yourselfhttp://en.wikipedia.org/wiki/Mutator_method%23JavaScript_examplehttp://en.wikipedia.org/wiki/Code_smellhttp://en.wikipedia.org/wiki/Code_smellhttp://en.wikipedia.org/wiki/Mutator_method%23JavaScript_examplehttp://en.wikipedia.org/wiki/Don%2527t_repeat_yourselfhttp://en.wikipedia.org/wiki/Code_smell


39/139


In the clock application, two elements are dependent on the framework:

The application instance; and the clock mediator.

The other elements are completely independent and highly reusable:

The timer model; and the clock views.

The clock application has been planned so that the clock views and the timer modelhave no dependencies and are reusable outside of the project. To achieve thisresult, the application has been broken down, and all elements are single purposed:

The timer model handles the time. The clock mediator destroys and creates clocks. The selector view handles a user event. The clock views create visuals on the screen.

The mediator pattern has been used to remove the dependencies in both the timermodel and the clock views. Without the mediator, they would have had a directdependency to each other.

The observer pattern (create event) has been used to decouple the selectorview from everything else. It also makes the application more scalable as otherelements can listen to the same framework events.

Dependency injection has been used to send references to all the elements,decoupling them and making them highly testable.

The clock views receive a reference to a DOM Element in the constructor, whichmakes them usable with any other DOM Element. They also provide a public API toupdate their content, so that they are usable by other elements externally withoutknowing about them.

ANALYZE THE CLOCK APPLICATION

27 of 29


40/139


The timer model provides an interface to add and remove callbacks, so it can sendthe time to a list of registered actors without knowing about them. Dispatchinga time event from the model to the mediator could have been another elegantsolution.

This architecture makes it easier to refactor the code, change the structure, add orremove elements, test each element separately, and update single element withoutchanging the whole application.

Thank you to all the developers and non-developers who helped me on bits andpieces one day or another. Especially to the clever bunch of people at Stinkdigital.

Big thanks to Henry Schmieder, author of the first version of soma.js, for his helpon both the framework and this article. And thank you Brian Rinaldifor editing andtrusting me with cutting-edge subjects such as this one!

It is probably not usual to thank tools, but they make everything so much easierthat I have to mention them.

Pagekiteis an amazing tunneling solution than I use constantly. Thank you Mochato make my life easier with asynchronous tests. JSdomis not talked about enough,amazing Node.js library that makes everything possible from the command line.Grunt.jsto make any automation possible. And last but not least, the people atJetBrainsfor making Webstormsuch a good JavaScript editor.

Article links:

Clock application demoClock application source code on githubTests the clock applicationUnit tests source codeClock application tests on Travis.

CREDITS

LINKS

28 of 29
http://stinkdigital.com/en/https://twitter.com/_fiveDusthttps://twitter.com/remotesynthhttps://pagekite.net/http://visionmedia.github.io/mocha/https://github.com/tmpvar/jsdomhttp://gruntjs.com/http://www.jetbrains.com/http://www.jetbrains.com/webstorm/http://soundstep.github.io/somajs-flippin-clock-app/https://github.com/soundstep/somajs-flippin-clock-apphttp://soundstep.github.io/somajs-flippin-clock-app/tests/https://github.com/soundstep/somajs-flippin-clock-app/tree/master/testshttps://travis-ci.org/soundstep/somajs-flippin-clock-apphttps://travis-ci.org/soundstep/somajs-flippin-clock-apphttps://github.com/soundstep/somajs-flippin-clock-app/tree/master/testshttp://soundstep.github.io/somajs-flippin-clock-app/tests/https://github.com/soundstep/somajs-flippin-clock-apphttp://soundstep.github.io/somajs-flippin-clock-app/http://www.jetbrains.com/webstorm/http://www.jetbrains.com/http://gruntjs.com/https://github.com/tmpvar/jsdomhttp://visionmedia.github.io/mocha/https://pagekite.net/https://twitter.com/remotesynthhttps://twitter.com/_fiveDusthttp://stinkdigital.com/en/


41/139


soma.js links:soma.jssoma.js demosFramework events (soma-events)Framework dependency injection (inuse.js)Framework templates (soma-template)

Framework mediatorsinuse.jssoma-eventssoma-templateRomuald Quantin (author)Henry Schmieder (author)

Unit testing links:Unit testing (wiki)Continuous integration (wiki)MochaJasmineSinon.js

Expect.jsTravis (CI)Mock object (wiki)

Other links:Model View Controller (wiki)Model View ViewModel (wiki)Design pattern (wiki)Web widgets (wiki)Loose-coupling (wiki)

Spaghetti code (wiki)Hollywood principle (wiki)Law o Demeter (wiki)Dependency injection (wiki)Observer pattern (wiki)Mediator pattern (wiki)Module pattern (Addy Osmani)Understanding interace (Microsof)Dependency injection video (Anthony Ferrara)Mediator Pattern (Addy Osmani)Bad code smells (wiki)DRY (wiki)

Romuald QuantinFront-end Developer

HISBLOG

TWITTER

SHARE

GITHUB
https://travis-ci.org/soundstep/somajs-flippin-clock-apphttp://somajs.github.io/somajs/site/%23demoshttp://somajs.github.io/somajs/site/%23application-instancehttp://somajs.github.io/somajs/site/%23dependency-injectionhttp://somajs.github.io/somajs/site/%23templatehttp://somajs.github.io/somajs/site/%23mediatorhttps://github.com/soundstep/infuse.jshttps://github.com/soundstep/soma-eventshttp://soundstep.github.io/soma-template/https://twitter.com/soundstephttps://twitter.com/_fiveDusthttp://en.wikipedia.org/wiki/Unit_testinghttp://en.wikipedia.org/wiki/Continuous_integrationhttp://visionmedia.github.io/mocha/http://pivotal.github.io/jasmine/http://sinonjs.org/docs/https://github.com/LearnBoost/expect.js/https://travis-ci.org/http://en.wikipedia.org/wiki/Mock_objecthttp://en.wikipedia.org/wiki/Model%25E2%2580%2593view%25E2%2580%2593controllerhttp://en.wikipedia.org/wiki/Model_View_ViewModelhttp://en.wikipedia.org/wiki/Software_design_patternhttps://en.wikipedia.org/wiki/Web_widgethttp://en.wikipedia.org/wiki/Loose_couplinghttp://en.wikipedia.org/wiki/Spaghetti_codehttp://en.wikipedia.org/wiki/Hollywood_principlehttp://en.wikipedia.org/wiki/Law_of_Demeterhttps://www.youtube.com/watch%3Fv%3DIKD2-MAkXyQhttp://en.wikipedia.org/wiki/Observer_patternhttp://en.wikipedia.org/wiki/Mediator_patternhttp://addyosmani.com/resources/essentialjsdesignpatterns/book/%23modulepatternJavaScripthttp://msdn.microsoft.com/en-us/library/aa260635%28v%3Dvs.60%29.aspxhttps://www.youtube.com/watch%3Fv%3DIKD2-MAkXyQhttp://addyosmani.com/resources/essentialjsdesignpatterns/book/%23mediatorpatternJavaScripthttp://en.wikipedia.org/wiki/Code_smellhttp://en.wikipedia.org/wiki/Don%2527t_repeat_yourselfhttp://www.soundstep.com/http://www.soundstep.com/http://www.soundstep.com/https://twitter.com/soundstephttp://somajs.github.io/somajs/%23/http://somajs.github.io/somajs/%23/https://twitter.com/soundstephttp://www.soundstep.com/http://en.wikipedia.org/wiki/Don%2527t_repeat_yourselfhttp://en.wikipedia.org/wiki/Code_smellhttp://addyosmani.com/resources/essentialjsdesignpatterns/book/%23mediatorpatternJavaScripthttps://www.youtube.com/watch%3Fv%3DIKD2-MAkXyQhttp://msdn.microsoft.com/en-us/library/aa260635%28v%3Dvs.60%29.aspxhttp://addyosmani.com/resources/essentialjsdesignpatterns/book/%23modulepatternJavaScripthttp://en.wikipedia.org/wiki/Mediator_patternhttp://en.wikipedia.org/wiki/Observer_patternhttps://www.youtube.com/watch%3Fv%3DIKD2-MAkXyQhttp://en.wikipedia.org/wiki/Law_of_Demeterhttp://en.wikipedia.org/wiki/Hollywood_principlehttp://en.wikipedia.org/wiki/Spaghetti_codehttp://en.wikipedia.org/wiki/Loose_couplinghttps://en.wikipedia.org/wiki/Web_widgethttp://en.wikipedia.org/wiki/Software_design_patternhttp://en.wikipedia.org/wiki/Model_View_ViewModelhttp://en.wikipedia.org/wiki/Model%25E2%2580%2593view%25E2%2580%2593controllerhttp://en.wikipedia.org/wiki/Mock_objecthttps://travis-ci.org/https://github.com/LearnBoost/expect.js/http://sinonjs.org/docs/http://pivotal.github.io/jasmine/http://visionmedia.github.io/mocha/http://en.wikipedia.org/wiki/Continuous_integrationhttp://en.wikipedia.org/wiki/Unit_testinghttps://twitter.com/_fiveDusthttps://twitter.com/soundstephttp://soundstep.github.io/soma-template/https://github.com/soundstep/soma-eventshttps://github.com/soundstep/infuse.jshttp://somajs.github.io/somajs/site/%23mediatorhttp://somajs.github.io/somajs/site/%23templatehttp://somajs.github.io/somajs/site/%23dependency-injectionhttp://somajs.github.io/somajs/site/%23application-instancehttp://somajs.github.io/somajs/site/%23demoshttps://travis-ci.org/soundstep/somajs-flippin-clock-app


42/139

appliness TUTORIALS PHONEGAP BOOKMARK / SHARE / TO

Backup, Remove and

Restore your ContactsUsing PhoneGap

by Simon MacDonald


43/139

UTORIALSBACKUP, REMOVE AND RESTORE YOUR CONTACTS USING PHONEGAP

by SimonMacDonald

2 of 6

A couple of people have had questions on how to do this recently so I thought I woulddo a write up on it. As well, it illustrates how you avoid using loops with asynchronouscode. Although for an even better explanation of that topic youll want to read Item 64:Use Recursion for Asynchronous Loopsfrom David Hermansbook, Effective JavaScript.Chapter 7 on Concurrencyis worth the purchase price of the book but I digress...

First a warning. Try all the code out on an emulator first. The methods below willcompletely wipe the contacts from your device so youll want to make sure the backup

step works first before continuing. Youve been warned!

Anyway, if you want to backup the contacts on your device to a file youd use thefollowing process:

1. Find all the contacts2. Request a file system object3. Create a FileEntry object4. Create a FileWriter

5. Write the JSON data to file

The code in which to accomplish those tasks is as follows:

functionbackupAllTheContacts() {

navigator.contacts.nd([*], function(contacts) { console.log(contacts.length = + contacts.length); window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,function(leSystem) { leSystem.root.getFile(contacts.bak, {create: true, exclusive:false}, function(leEntry) { leEntry.createWriter(function(writer) { writer.onwriteend = function() { console.log(backup complete); }; writer.write(JSON.stringify(contacts)); }, onError); }, onError); }, onError); }, onError, {multiple: true});}

HTML5 makes life easierfor us by defining the right

element.
https://twitter.com/littlecalculisthttp://www.amazon.ca/gp/product/0321812182/ref%3Das_li_ss_tl%3Fie%3DUTF8%26camp%3D15121%26creative%3D390961%26creativeASIN%3D0321812182%26linkCode%3Das2%26tag%3Dsimmacsblo-20http://www.amazon.ca/gp/product/0321812182/ref%3Das_li_ss_tl%3Fie%3DUTF8%26camp%3D15121%26creative%3D390961%26creativeASIN%3D0321812182%26linkCode%3Das2%26tag%3Dsimmacsblo-20https://twitter.com/littlecalculist


44/139


Once you see the backup complete message in the console youll have a filecalled contacts.bak in the root directory of your file system. For Android usersthat will probably be /sdcard and for iOS, etc. it would be in the applicationssandbox. If you take a look at the file you will see something like this:

{ id: 4, rawId: 4, displayName: 123 456, name: { familyName: 456, formatted: 123 456, givenName: 123 }, nickname: null,

phoneNumbers: null, emails: null, addresses: null, ims: [ { type: -1, value: .adgjm, id: 8, pref: false } ],

organizations: null, birthday: null, note: null, photos: null, categories: null, urls: null }, { id: 5, rawId: 5, displayName: Dooney Evans, name: {

middleName: , familyName: Evans, formatted: Dooney Evans, givenName: Dooney }, nickname: null, phoneNumbers: [ { type: work, value: 512-555-1234,

3 of 6


45/139


id: 11, pref: false } ], emails: null, addresses: null,

ims: null, organizations: null, birthday: null, note: null, photos: null, categories: null, urls: null }, { id: 18, rawId: 18, displayName: John Doe, name: { familyName: Doe, formatted: John Doe, givenName: John }, nickname: null, phoneNumbers: null, emails: null, addresses: null, ims: null, organizations: null,

birthday: null, note: null, photos: null, categories: null, urls: null }, { id: 19, rawId: 19, displayName: Rob Doe, name: {

familyName: Doe, formatted: Rob Doe, givenName: Rob }, nickname: null, phoneNumbers: null, emails: null, addresses: null, ims: null, organizations: null, birthday: null,

4 of 6


46/139


note: null, photos: null, categories: null, urls: null }

]

If you are seeing what looks like your complete contact database in text formatthen you are ready to proceed.

Next we will delete all the contacts on the device. The steps are:

1. Find all the contacts.2. Recurse through the contacts deleting one at a time.

The code looks like:

functiondeleteAllTheContacts() { vardeleteContact = function(contacts) { console.log(length = + contacts.length); // No contacts left, stop saving if (contacts.length == 0) { console.log(All contacts removed); return; }

varcontact = contacts.pop(); contact.remove(function() { deleteContact(contacts); }, null); };

navigator.contacts.nd([*], deleteContact, onError, {multiple: true});}

This might look a little bit weird at first glance but trust me itll make sense. Youll

notice in deleteAllTheContactsthe first thing we do is to create a local functioncalled deleteContacts. This is the method that will actually remove the contactsfrom the device. Then after the definition of deleteContacts we call navigator.contacts.find(). This call will get an array of all the contacts on the device and callits success function which is deleteContacts.

Now in deleteContactswe do a check to see if the length of the contacts arrayis zero. If it is zero then we are done, there are no more contacts left to be deleted.If the contact array length is greater than zero we have more work to do. Well pop

5 of 6


47/139


the next Contactobject off of the contacts array, which reduces the size of thearray by one and well call the removemethod of the Contactobject. The successcall back for removemethod is the deleteContactsmethod. Keep reading thisparagraph until all of your contacts have been deleted. Boom recursion.

But wait, you are wondering how could this possibly work. Your thinking Ive got 7quintillion contacts and there is no way the call stack can support that many recursivecalls. Ah, but you are forgetting that asynchronous calls return immediately so theynever eat up the call stack. If you tried doing this with a for loop you would blowup the call stack causing your program to crash if you had enough contacts andeven if you didnt kill your app how would you know when all of those async callsto removewere complete without doing a lot of JavaScript gymnastics. Just usethe recursion approach.

Finally youll want to be able to restore the contacts youve previously saved tofile. Ive broken it down into two separate methods to make it easier to read:

1. Request local file system2. Get the FileEntry3. Request the File object4. Read the data and parse it to JSON5. Recurse through all the contacts and save them to the device

This is pretty much just unrolling the two previous steps of backing up and deletingthe contacts. If youve gotten this far you should be able to understand what isgoing on. Although there are two lines I want to draw your attention to:

contactData.id = null;contactData.rawId = null;

What Im doing here is removing the unique IDs from the contact. If you skip thisstep you will signal the API that you are attempting to modify an existing contact

and the save will most probably fail. Hopefully this helps a bunch of folks.

Simon MacDonald

Software Engineer

HISBLOG

TWITTER

SHARE

GITHUB
http://simonmacdonald.blogspot.com/http://simonmacdonald.blogspot.com/http://simonmacdonald.blogspot.com/https://twitter.com/macdonsthttps://twitter.com/macdonsthttp://simonmacdonald.blogspot.com/


48/139

appliness INTERVIEW DAN MALL BOOKMARK / SHARE / TO


49/139

appliness INTERVIEW DAN MALL BOOKMARK / SHARE / TO

INTERVIEW

DANMALL

by Maile Valentinephotos Terry Ryan


50/139

3 of 11

APPLINESS: Hi Dan! Thank you forjoining us, we are very excited tohave you feature in Appliness. Canyou tell us a bit about yourself?

Thanks for having me! Im DanMall, Founder & Design Directorat SuperFriendly, a design studio

that makes brave sites and apps forscreens of all sizes. Professionally,Im a designer, developer, strategist,advisor, and a co-founder (more onthat later). Personally, Im a husband,a dad, and a musician.

Can you tell us about SuperFriendly?When did you start this design

agency? What was your motivation?

Design Director at digital creativeagency Big Spaceship. When my wifeand I found out she was pregnant, wewanted to move back to Philadelphiato be closer to family. I was sad to leaveBig Spaceship as I didnt think Id findanywhere Id like working as much,

and I also wanted to be able to spendas much time with my wife and newdaughter as I could (which agency lifedoesnt always afford), so I thought itwas a good time to give it a go on myown.

SuperFriendly works as a Hollywoodmodel, where we have a core team that

works on every project and assemble a

roster of specialists as needed. Someprojects are just my producer, mydesign and development apprentices,and me. For others, weve pulled inthe best user experience designers,technical directors, back-enddevelopers, illustrators, CMS experts,art directors, and more.

Congratulations on SuperFriendlywinning .net magazines award forBest New Agency for 2013! Whatcriteria did they use in their selectionprocess?

I think they just accepted the agencythat sent them the most cash! I kid, I

kid. Seriously though, the requirementswere pretty slim while still challenging.Eligible agencies had to only be inbusiness for a year or less, work with5 or more people, and do great work.Were lucky to have a great set offriends and fans that thought we weredeserving of the award.

TERVIEWDAN MALL
http://superfriend.ly/http://www.bigspaceship.com/http://www.bigspaceship.com/http://superfriend.ly/


51/139

DAN MALL

DESIGN & DEVELOPMENT

Youve gotten to work for somepretty impressive clients (e.g.,LucasFilm, Mattel, Google, Apple,Reading is Fundamental and manymore). Any favorite projects?

All of them! Honestly, I cant think of aproject where there wasnt something

that was special. Sometimes, its a smallskill I was able to learn, like a particular

illustration technique or JavaScriptlibrary. Other times, its a client thatsa joy to work with. Theyre all uniqueand wonderful project snowflakes.

How important has your blendof experience in design anddevelopment been in getting work

for these clients?4 of 11

TERVIEWDAN MALL


52/139

5 of 11

I dont think Id be where I am today ifI wasnt able to bounce back and forthbetween design and development.Making digital things for clientswebsites, apps, installations, etc.issuch a fluid process. What looks great

in Photoshop can often be terriblewhen you see it on a TV screen; quickprototypes of anything youre makingand seeing something in real life gosuch a long way to making successfulwork.

Im a big believer in IDEO CEO TimBrowns T-shaped concept: peoplethat have a wide range of generalskills (the bar) but also have a deepexpertise in one or a few areas (thestem). Im no hardcore developer, but,on a call yesterday with a prospectiveclient, I had to explain SuperFriendlyscapabilities with APIs written in JSON-like formats. While Ive never done itmyself, I know enough about it frombuilding teams containing people whocan do it in their sleep, and being ableto speak to it may have won us someexciting, new work.

Do you prefer to work alone or aspart of a team? Why?

I definitely prefer working with ateam when possible. Working withgreat people makes me better. Theychallenge my beliefs and conventionsand often lend perspectives that Iwouldnt/couldnt have had workingby myself. It helps me to be moreempathetic, which doesnt just makeme a better designer; it makes me a

better husband, dad, and human too.

Although Ive been working as adesigner for a long time, I realizedlong ago that my real skill isnt design.I think my design ability has a cap, andIve reached it or at least generally

reached a plateau. Ive worked withinterns right out of school that werealready better designers than Id everbe.

I love talking to clients and collaboratingwith them to get to a vision eachteam is excited about. I love being incorporate boardrooms and runningday-long workshops turning a bunch ofrandom ideas into a cohesive strategy.Obstinate clients or shallow strategiesare the things that trip up designersand developers when theyre workingon a site or an app that would otherwisebe really exciting. The thing I thinkIm best at is serving, enabling, andempowering other people to do theirbest work by knocking down thoseobstacles so that the other people onmy team dont have to worry about it.How could I ever put that into practiceif I was working alone?

How have you and your teamstreamlined your design process

over time? What have been some ofthe biggest lessons learned? Is yourapproach fairly standard, or does itchange from client to client?

One of the first things we say to aprospective client is that we donthave a set process. Every client isdifferent and we want to embrace

that. Some clients like Basecamp and

TERVIEWDAN MALL
http://web.archive.org/web/20120305044830/http://www.chiefexecutive.net/ME2/dirmod.asp%3Fsid%3D%26nm%3D%26type%3DPublishing%26mod%3DPublications::Article%26mid%3D8F3A7027421841978F18BE895F87F791%26tier%3D4%26id%3DF42A23CB49174C5E9426C43CB0A0BC46http://web.archive.org/web/20120305044830/http://www.chiefexecutive.net/ME2/dirmod.asp%3Fsid%3D%26nm%3D%26type%3DPublishing%26mod%3DPublications::Article%26mid%3D8F3A7027421841978F18BE895F87F791%26tier%3D4%26id%3DF42A23CB49174C5E9426C43CB0A0BC46


53/139

6 of 11

others prefer Google Groups. Somewant daily check-ins and others wantus to go away to work and come backwhen the project is done. To put thatrange of clients through the samecycle is almost disrespectful. Clients

are like laundry: some need machinewash hot and others need the gentlecycle.

From a deliverables standpoint, welike to leave the door open for whatsnecessary at the time its needed. Notall projects need wireframes. Someprojects need a bigger content auditthan others. My friend Matt Griffinfrom Beardedonce called it a buffetof deliverables, which I quite like. Iveused this approach for years but onlynow have a name for it.

What are some of the factors you takeinto consideration when deciding tocreate a unique desktop and mobilepresence for a client vs. a responsivedesign?

One of the largest factors is what theclient asks for. We try to make it a pointto work with smart clientsseriously,weve turned down clients that didntseem like theyd challenge the team

intellectuallyso when smart clientssay they want a mobile site, we think/hope theyve done the due diligenceto intelligently arrive at that decision.That said, we certainly take it with agrain of salt and are sure to ask whythey want what they want, responsiveor not.

In general, we do make the assumptionthat any site we build will be responsive,in the same way we assume any sitewe build will use CSS for layout andnot tables. Said another way, welllikely build responsive unless theres a

reason not to do so.

TERVIEWDAN MALL
http://bearded.com/http://bearded.com/


54/139

DAN MALL

TOOLS

What are your favorite design tools?

I dont think I could work withoutPhotoshopor my Wacom Intuostablet.I also love xScope, Typecast, ScalaPreview, and FontExplorer X.

What are your favorite development/technical tools?Git with Beanstalk, the ResponsiveDesign bookmarklet, Sublime Text2, MAMP Pro, Transmit, and AdobeEdge Inspect.

How important HTML5-relatedtechnologies in your work? What doyou like about these technologies?Where do you still see room forimprovement?

Ive got 2 different answers for this.In one sense, theres a very literalinterpretation of what HTML5means, which is the new additionsto the markup language. I love theadditional semantics and the new tagswe can use, like and and and more, as it allows us

to be more descriptive about the typeof content were marking up.7 of 11

TERVIEWDAN MALL
http://www.photoshop.com/http://www.wacom.com/products/pen-tablets/intuos/intuos5-touch-largehttp://iconfactory.com/software/xscopehttp://typecast.com/http://bjango.com/mac/skalapreview/http://bjango.com/mac/skalapreview/http://www.fontexplorerx.com/http://git-scm.com/http://beanstalkapp.com/http://responsive.victorcoulon.fr/http://responsive.victorcoulon.fr/http://www.sublimetext.com/2http://www.sublimetext.com/2http://www.mamp.info/en/mamp-pro/http://panic.com/transmit/http://html.adobe.com/edge/inspect/http://html.adobe.com/edge/inspect/http://html.adobe.com/edge/inspect/http://html.adobe.com/edge/inspect/http://panic.com/transmit/http://www.mamp.info/en/mamp-pro/http://www.sublimetext.com/2http://www.sublimetext.com/2http://responsive.victorcoulon.fr/http://responsive.victorcoulon.fr/http://beanstalkapp.com/http://git-scm.com/http://www.fontexplorerx.com/http://bjango.com/mac/skalapreview/http://bjango.com/mac/skalapreview/http://typecast.com/http://iconfactory.com/software/xscopehttp://www.wacom.com/products/pen-tablets/intuos/intuos5-touch-largehttp://www.photoshop.com/


55/139

8 of 11

The other way is to look at HTML5as a catch-all term for the new HTML/CSS/JS technologies available to us.(Jeff Croft has a great write-up about

this: On the Term HTML5.) Itsreally great to see these wonderfultechnologiesgeolocation, offlinecaching, CSS animations, the HistoryAPIbeing built right into the browser.

Theres always room for improvement.More features means more opportunityfor more bloat. The need for optimizedperformance on websites is ever-increasing, especially with moreand more people accessing the webthrough smaller devices on smallerconnections. I hope that technologicalinnovations continue to be balancedwith innovations in performance too.

TERVIEWDAN MALL
http://jeffcroft.com/blog/2010/aug/02/term-html5/http://jeffcroft.com/blog/2010/aug/02/term-html5/


56/139

DAN MALL

YOUR PROJECTS

Tell us about The BusinessologyShow? What void does this fill fordesigners and developers?

One thing I love about our industry

is the willingness to share. Were oneof the only industries where well getin a room full of our competitorscompetitorsand share all of oursecrets: Photoshop tips, coding tricks,workflow improvements, and tonsmore.

However, when it comes to business,

most people think its a black box.

Rightly so: talking about businessgets scarily close to talking abouthow much money you make, and itsembarrassing to find out youve beenundercharging or not writing contracts

properly.

The secret about the business of designis that its not a science. Its as much anart as it is a science. Just like everyoneuses Photoshop differently, everyoneruns their businesses differently andthats ok. One person may charge$10,000 for a project that someone

else may charge $1,000 for and thats9 of 11

TERVIEWDAN MALL
http://businessologyshow.biz/wordpress/http://businessologyshow.biz/wordpress/http://businessologyshow.biz/wordpress/http://businessologyshow.biz/wordpress/


57/139

10 of 11

ok. My co-hostJason Blumerand Iset out to help people realize that itsok and give them more transparentinformation about ways of running adesign business. And thats how theBusinessology Show came to exist.

Can you tell us about Typedia? Whatis it and why was it created?

Typedia is a wiki-based encyclopedia fortypefaces. About 7-8 years ago, JasonSanta Mariaand I were both thinkingabout ways to catalog/categorizetypefaces and discover new ones. Weboth look for type in similar ways; ifwere designing something that needsto feel French, we wanted a quick listof typefaces designed in France or bya French designer or foundry. Nothinglike that existed, so we decided to joinforces to build it. Together with a fewmore friends, we launched Typedia in2006.

Weve been working on a new versionover the last few years in our sparetime, so look for a brand new Typediavery soon that will make finding andcataloging typefaces even easier.

TERVIEWDAN MALL
http://jasonsantamaria.com/http://jasonsantamaria.com/http://jasonsantamaria.com/http://jasonsantamaria.com/


58/139

DAN MALL

& FUN

You used to play keyboard for theband Four24, do you have any timethese days to play?

I do! I play the piano with my 2-year

old dau

Date post:	08-Aug-2018
Category:	Documents
Upload:	serghei-cebotari
View:	215 times
Download:	0 times

Appliness #17 – August 2013

Documents