Build tons of multi-device JavaScript applications Part 1 : Boilerplate, design patterns & MVC(C), high performance UI by Jean-Baptiste Guerraz & Igor Uzlov & UA Web Forum Kiyv 2014

1. Build tons of multi-device
JavaScript applications
Jean Baptiste Guerraz
Skilld. CTO & Co-founder
Igor Uzlov
Skilld. Lead JS Developer
http://www.skilld.fr

2. What Skilld is ?
- A band of (20+) crazy IT punks :)
- Distributed over 3 time slots
- Ukraine, Russia, Peru = Skilld never stops!
- Driven by French frogs
- Who build any WWW related objects (wherever it’s
displayed)
- Using flexible open-source (only!) techs (Can.JS,
Cordova, Node.js, Drupal, Symfony and few more!)
- Only one limit! 72h!

3. What Skilld were asked to do ?
An application that works on the following platforms:
- Mobile (Android, IOS, Windows Phone)
- From IOS 5 & Android 2.3 ;(
- Tablets (Android, IOS)
- Facebook
- Website (multi-device)

4. What needs
to complete that mission ?
- A light framework
- Yeah… Android 2.3+ / IOS 5
- A performances oriented framework
- A backbone
- But not backbone.js! (We used it too much already!)
- A way to manage layouts
- A wrapper for mobile / tablets applications

5. A light and performant framework ?
http://bit.ly/1dlnWRg

6. A light and performant framework ?
http://bit.ly/1uR0OXc
Controllers initialization

7. A light and performant framework ?
http://bit.ly/1uR0OXc
Live-Binding initialization

8. Model View Constructor Controller
- Model
A backbone ?
- From REST service to (observables) Objects
- A kind of JS ORM :)
- View
- Just a template ;)
- Mustache.js
- Constructor (require init & destroy methods)
- An object that deals only with processing
- Controller (require init & destroy methods)
- An object responsible for a part of, or the whole,
User Interface (an object that deals with DOM)
Give your projects a structure punks!

9. A backbone ?
Asynchronous Module Definitions
RequireJS
● File loader
● Module definitions
● Dependencies management
● Works super fast with nodejs (r.js)
o Run AMD-based projects in Node and Rhino.
o but please, use Node! ;)
o Includes the RequireJS Optimizer that combines
(and minify thanks to Uglifyjs) scripts for optimal
browser delivery.

10. A backbone ?
Asynchronous Module Definitions
Let’s optimize our project!

11. A backbone?
Event driven Finite State Machine
For example this...

12. Let’s add a context!
An (observable) key / value storage related to
current state
Car radio example
State : radio
Context : FM frequency value
State : MP3 player
Context : mp3 file URI

13. A backbone?
Mediator pattern
A central object for all others to communicate
(publish / subscribe)
Once again, the state context to the rescue!
http://bit.ly/1AxOFeg

14. A backbone ?
Observers pattern
A simple way to know what’s going on, and so when to react!
Keep it easy, Observe the state context :)
http://bit.ly/1xNsfES

15. A backbone ?
Abstract Factory / Builder pattern
Build my objects punk!
http://bit.ly/1AxOKib

16. A backbone ?
Layouts & Regions

17. A backbone ?
Layouts & Regions
Give your UI a high flexibility!
- Layout
- A set of regions
- A template (mustache)
- Region
- A “place” to print out some HTML
- Or even a layout
- Inception rocks!
(Layout > Region > Layout > Region…)

18. Layouts & Regions
Layout definition file :
define
(
function()
{
return {
name: 'twoRows',
layout: 'views/layouts/twoRows.mustache',
regions:
[
{name:'row1', selector:'.two-rows-row-1'},
{name:'row2', selector:'.two-rows-row-2'}
]
}
}
);

19. Layouts & Regions
Layout template file :
<div class="two-rows-row-1"></div>
<div class="two-rows-row-2"></div>

20. Layouts & Regions
A region is a
Document Fragment
(performances matter!)

21. Files & Directories
www/
|-- app
| |-- config
| |-- constructors
| |-- controllers
| |-- fixtures
| |-- layouts
| |-- models
| |-- views
…
|-- vendors
| |-- can
| |-- skilld
| |-- jquery
| |-- zepto
| |-- require
| |-- lawnchair
| |-- i18n
...
|-- vendors/skilld
|-- construct
| |-- stateInterface.js
|-- controller
| |-- stateInterface.js
| |-- pageInterface.js
|-- model
|-- ui
| |-- layouts.js
| |-- ...
autoloader.js
model.js
router.js
state.js
storage.js
workers.js

22. Configurations ?
www/app/config/
|-- i18n
| -- locales.js
|-- layouts
| |-- about.js
| |-- account.js
| |-- activities.js
...
|-- routes
| |-- about.js
| |-- account.js
| |-- activities.js
...
-- workers
|-- about.js
|-- account.js
|-- activities.js
….

23. Configurations - Routes
...
return [
{
query: '/login',
defaults: {},
state: 'login'
}
];
...
...
return [
{
query: '/help/:helpAboutItem',
defaults:
{
'helpAboutItem' : 1
},
state: 'help'
}
];
...

24. Configurations - Workers
...
state:
{
login:
[
{path: 'constructors/authentication', recycle: true},
{path: 'controllers/login', recycle: false}
]
},
stateContext: {
checkin: [
{path: 'controllers/checkin', recycle: false}
]
}
...

25. Configurations - Layouts
...
state:
{
friends:
[
{name: 'base', target: null, path: 'layouts/base'},
{name: 'main', target: 'base.content', path: 'layouts/main'},
{name: '2rows', target: 'base.content.main.content', path: 'layouts/2rows'}
]
},
stateContext: {}
...

26. A wrapper for
mobile / tablets applications
Apache Cordova
(or PhoneGap)

27. Apache Cordova (/ Phonegap)
Develop once deploy everywhere!
● Cordova is…
o Just a browser! (chrome webview or android stock browser
webview)
o A JS API to access devices features
o Compass
o Accelerometer
o File System / File Transfer
o Splashscreen
o Camera
o Contacts
o Media
o And plenty of other cool plugins (like FacebookConnect,
SocialSharing, … and custom ones!!)

28. Thank you! Merci! Дякую!
Any question ?
SkilldJS Comming soon on GitHub :)
@jbguerraz
@iuzlov
http://www.skilld.fr/en
Find those slides on Slideshare :
@iuzlov / @jbguerraz