Universal Applications with Universal JavaScript

Universal Applications
with
Universal JavaScript
Today 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 are
environment agnostic
or
adapted to environment

Environment agnostic
 Does not depend on platform speciﬁc 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-speciﬁc properties so
module can expose as single API.
 Example:
 console.log(‘Hello World’);
 app.path API
 window.location.pathname (Browser)
 req.path (Server)

JavaScript Engine
THE 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
JavaScript
IS 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 of
shared 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!

Developing Universal
Apps with JavaScript
(AND FRIENDS)

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

Write Once, Run Anywhere
Learn Once, Write Anywhere

LOWA Universal JavaScript
Frameworks
 React + React Native
 Angular 2 (+ friends)

“
”
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.

“
”
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 Dust
Browser    
SERVER
NodeJS    
Java    
.NET    
MOBILE NATIVE
iOS    
Android    
Windows    
Universal JavaScript Libraries

Universal Applications with Universal JavaScript

More Related Content

What's hot (20)

Similar to Universal Applications with Universal JavaScript (20)

Recently uploaded (20)

Universal Applications with Universal JavaScript