Universal ApplicationswithUniversal JavaScriptToday JavaScript is a ubiquitous runtime.  JavaScript is everywhere - from Browser,  server side, embedded device, mobile and gaming. JavaScript can be leveraged to write once and run everywhere or have a consistent programming style, and drive consistent experience across multiple channels – browser, Servers side, or Native Mobile apps.

Thomas Joseph

Universal JavaScript

JavaScript is everywhere!

Isomorphic = Universal

Universal JavaScript areenvironment agnosticoradapted to environment

Environment agnostic Does not depend on platform specific properties, browser (window),

server (process.env, req.cookies) or a device. Example (Handlebars)

var templateFn = Handlebars.compile(template);

var html = templateFn(data);

var template = ‘<h1>{{title}}</h1><ul> {{#names}} <li>{{name}}</li> {{/names}}</ul>’

var data = { "title": "Story", "names": [ {"name": "Tarzan"}, {"name": "Jane"} ]}

<h1>Story</h1><ul> <li>Tarzan</li> <li>Jane</ul></ul>

Adapted to environment Provides adaptors for accessing environment-specific properties

so module can expose as single API. Example:

console.log(‘Hello World’); app.path API

window.location.pathname (Browser) req.path (Server)

JavaScript EngineTHE RUNTIME FOR A PLATFORM

JavaScript Runtimes – Browser

V8 (Chrome) Chakra (IE) SpiderMonkey (FireFox) JavaScriptCore / Nitro (Safari)

JavaScript Runtimes – Server Side

NodeJS Nashorn (Java) Rhino (Java) Jurassic (.NET) V8.NET (.NET) J2V8 (Java)

JavaScript Runtimes – Mobile (Native)

V8 (Android) Chakra (Windows) JavaScriptCore / Nitro (iOS)

JavaScript Runtimes – Embedded

V8 – Raspberry Pi

JavaScript Runtime

Build It or Port It!

Why Universal JavaScriptIS RELEVANT FOR APPLICATION DEVELOPMENT?

In pursuit of the Holy Grail

Thick Client / Thin Server Applet

Flash

SPA

Thin Client / Thick Server

Servlets / PHP etc

AJAX

Universal JavaScript Apps

o Performance• initial page load speed

o SEO• Crawlable applications (vs SPA)

o Maintainability• Reduce code duplication

o Flexibility• Run code where you want*

o Learning Curve?• Learn once, Write anywhere!

Control the spectrum ofshared logic

Small bits of view layer

Few abstractions

Simple

Entire view layer & app logic

Many abstractions

Complex

Most of the libraries are ready for it!

Who are using it?

Developing Universal Apps with JavaScript(AND FRIENDS)

Hack Time

Write Once, Run Anywhere

What about…?

Hybrid Apps(JavaScript + HTML5 + CSS3)

Primarily targets Mobiles (cross-platform) for Native (like) apps

Uses the Web View to run on Mobile Example:

PhoneGap / Cordova Ionic Onsen UI Intel XDK Sencha Touch Kendo UI (telerik) JQuery Mobile Mobile Angular UI

Appecerator Titanium(JavaScript + XML + CSS)

Targets Mobiles (cross-platform) for Native apps

Not for Server Side or Browser – not truly universal

Runs on native JS engine of the platform

“Appcelerator Titanium is a free and open source application development platform that lets you create cross platform native mobile applications using existing Javascript skills. ”

“The Appcelerator Platform includes SDKs, services and tools for creating, testing, and managing your mobile and cloud applications”

Hybrid Apps vs Native Apps

Performance Graphic Capabilities (& Speed) Device Capabilities – Geolocation, Addressbook, Camera etc. Native Looks Learning Curve Cost Time to Market

Mobile App development is a pain(and costly) One App – Different Development

Different teams build the same thing using different languages, frameworks & libraries.

Code, Build and maintain the same app across different platforms: iOS (Phone/Tablet), Android (Phone/Tablet),Web (Desktop/Phone)

Feature Parity Hard to maintain feature parity & consistent terminology.

App Ownership Impossible to be an expert in all technologies and “own” something in all products

there is no one silver bullet

Write Once, Run Anywhere

Learn Once, Write Anywhere

LOWA Universal JavaScript Frameworks

React + React Native Angular 2 (+ friends)

React+React Native

“”

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

HTTPS://FACEBOOK.GITHUB.IO/REACT-NATIVE/

React Native Rendering

Virtual DOM manipulation instead of physical DOM

React Native runtime translates virtual DOM rendering to native OS UI components.

Angular 2

“”

Learning Angular 2 gives you the tools you need to build apps for desktop, mobile web, Android, and iOS. Angular Universal provides for server-side rendering for fast initial views on mobile web. Ionic and NativeScript let you build hybrid and native UI mobile apps. Web worker support keeps your app UI fully responsive no matter how heavy the load

HTTPS://ANGULAR.IO/FEATURES.HTML

Angular 2 architecture

Separates Application Core & Rendering Can be separate files or processes

Possibility of variety of renderers for several platforms Browser (default) Server Side (Angular U) Hybird Apps (Ionic) Native Apps

NativeScript React Native

Angular 2 React Handlebar DustBrowser

SERVERNodeJS Java .NET

MOBILE NATIVEiOS Android Windows

Universal JavaScript Libraries

=

Opportunities!

Thank You