Single Page Applications 2.0

Push the limits of what’s possible on the web

New Topics

• Tool Chain, Code Organization• Asset pipeline hooks • Programmable CSS with SASS and Bourbon• Transpile ES6 ES5• ES6/ES7 with Angular • AMD with Angular• DI 2.0 with Angular• HTML5 Custom Elements• Functional Reactive Programming with Angular • NG- Patterns : Logging, Security, Resiliency, Cache

Tool Chain

Gulp - Task Runner

• The streaming build system. No more temp files.• Gulp replace Grunt.

– Install: npm install -g generator-gulp-angular– Run: yo gulp-angular [app-name]– Run gulp for building and gulp watch for preview

gulpfile.js

Gulp and its NPM packages

• Built-in preview server with LiveReload, file watcher • CSS Pre-processing : SASS, Bourbon Mixins• CSS Autoprefixing : add vendor prefixes• JSHinting, CSSLinting : lint your scripts, CSS• JS Transpilers: ES6 ES5• Awesome Image Optimization, WebP• AMD/RequireJS Support• Concatenation/Optimization, Minification, uglify • Automatically wire-up dependencies installed with Bower

(when gulp watch or gulp wiredep)

Code Organization

• Adopt De Facto Standards – Yeomen generated project structure – Rapid prototyping using scaffolding generators

• Modularity: Organize your files by Feature not by Type – Modules are independent WebApp functionality that developers can work

in parallel– Isolate complexity into separate pluggable modules – In an AngularJS context, modularization is organization by function

instead of type.

• Everything that gets deployed is in the app directory. • Everything outside of the app directory is for development

Compose Apps by assembling smaller modules

Organize Files : by Feature, Not by Type

Common/ elements/ myElementTemplate.html MyElement.js services/ i18nService.js filters/ i18nFilter.js i18b/

en_EN.jsonde_DE.json

Index.jsorders/ elements/ tableTemplate.html TableElement.js table.css services/ OrderService.js index.js

home/ controllers/

HomeController.jsLoginController.js

services/ UserService.js AuthenticationService.js i18b/

en_EN.jsonde_DE.json

index.jsindex.js

../views/home/

home.htmlorders/

order.html

order.details.html

Scalable and Modular layout for stylesheets/||-- admin/ # Admin sub-project| |-- modules/| |-- partials/| `-- _base.scss||-- account/ # Account sub-project| |-- modules/| |-- partials/| `-- _base.scss||-- site/ # Site sub-project| |-- modules/| |-- partials/| `-- _base.scss||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker-1.1.scss # in Bower case, under bower_components| |-- _jquery.ui.core-1.9.1.scss| ...||-- admin.scss # Primary stylesheets for each sub-project|-- account.scss|-- _variables.scss`-- site.scss

Write leaner, programmable, and maintainable CSS with SASS & Bourbon

AMD with Angular

Components

Modules

Root Module

Bootstrap

Config Config.js

Bootstrap.js

index.js

HomeIndex.jsroutes.js

ControllersServices Elements

AccountIndex.jsroutes.js

ControllersServices Elements

CommonIndex.jsroutes.js

ControllersServices Elements

DashboardIndex.jsroutes.js

ControllersServices Elements

Scripts loading with AMD

Testability Why do you need to write tests?

– Because you’re not Chuck Norris.

Unit Testing

Karma: Spectacular Test Runner using real browsers!– Jasmine: behavior-driven development framework for testing

JavaScript code. – Mocha: Simple, flexible JavaScript test framework.

PhantomJS: Headless TestingIntegration Testing

– Protractor: AngularJS E2E Testing Frameworkgulp test command transpile ES6 tests and perform all unit and integration tests

User story: “As a user, when I login to my app, I am taken to the dashboard page.”

ECMAScript 6.0

You Can’t Afford to Avoid ES6

Author In ES6, Transpile To ES5 As A Build-step: Gulp Workflow

Traceur & Polyfills

Traceur and Shim/Polyfill makes it possible to use tomorrows technology now!

– Traceur is a JavaScript.next JavaScript.now compiler– “A polyfill is a piece of code (or plugin) that provides the

technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.”

( from Remy Sharp blog)

Traceur provide ES6 that are not available in any browser yet. Polyfill provide HTML5/ES6 features that are not available in some of the browsers yet.

ES6 Goodies

• Modules, Classes, Typed, Traits• Generator, Promises, Proxies• Closures / Fat Arrow Functions • Let, Const, Private scope and Block Functions• Destructuring, For-Of and Array Comprehensions • Spread Operator, Rest Parameter, and Default

Arguments• Template Strings, string interpolation• Collections : Set, Map, Weak Set/Map, Binary Data • ES7 Object.observe , async/await functions

Promises

Promises are useful when you want to represent the outcome of an action or a value that will be available at some future time.

– It is an easy way to avoid writing the Pyramid of Doom – Function return a promise - no more callback parameter – A promise represents an eventual outcome – Promises can be pending, fulfilled or rejected– they are only resolved once;– Guaranteed to always be async.– Promises can be chained. Re-tryable– Promises as first-class objects – “then-able” objects. then() method returns another promise and you can

return data from the callback to the next promise in the chain.– A deferred is an object representing work that is not yet done and a promise

is an object representing a value that is not yet known.Promise Combinators:

Promise.all([p1,p2,p3]) , Promise.race([p1,p2,p3]) , Promise.any([p1,p2,p3])

Promises fix callback hell of async code

Promise Chaining Asynchronous Control Flow with Promises

Promises are a replacement for Callbacks to help you deal with composition of multiple async operations while also making error handling simpler in some cases.

What's the Big Deal with Generators?

"First-class coroutines, represented as objects encapsulating suspended execution contexts (i.e., function activations)”

Allows suspension of a function's execution until resolved - everything else outside of that execution continues. Higher-order functions

Uses a yield statement instead of a return to report values. The essence of generator is controlling the suspension of code execution. Caller control execution of code in

Generator function.

Use Cases • Infinite iterator : Good for representing infinite sequences. Generator return iterators.

• Non-blocking I/O : When we don't yield execution, we're blocking. • Demand-driven: functions can interactively yield partial results as soon as available. • Lazy Sequences: We can rewrite lazy version of Underscore.js using Generators. Since filter and map

return generators, nothing happens until reduce. You can get benefits of declarative functional data manipulation without the performance and memory downsides of intermediate arrays.

• Run-to-completion(RTC) is a scheduling model in which each task runs until it either finishes, or explicitly yields control back to the scheduler.

• Flow Control: you can actually pass data back in to the generator, causing yield to either return a value or throw an exception inside the generator body.

• Synchronously looking Asynchronous code: “Async functions are a thin sugar over generators and a spawn function which converts generators into promise objects”

Generators Use case Scenarios

This is a big deal: generators finally provide us with a pseudo-synchronous syntax that doesn't break run-to-completion semantics, doesn't require transpiling, and doesn't require callbacks.

Basic Examples Control Flow

Parallel Loops

Generators makes it possible write async code that looks like synchronous

ES7 async / await functions

AOP in JavaScript

• ES6 Proxies and Angular Decorators enable augmenting new behaviors to existing JS Objects and classes at runtime.

• Can be used along with Traceur’s Annotations (ES6+) to add cross-cutting concerns by scanning annotations during application bootstrap process.

• Angular 2.0 Dependency Injection will adopt this approach.

• Retry aspect has been implemented using this technique in SPA Starter Kit.

Functional Programming

What is FP? A style which utilizes HOFs and minimize side effects. Why FP? Parallelization , Concurrency , Lazy evaluation • Function composition

– E.g. collection.filter { x -> x > 5}.map{ x -> x * x}– Data1 => function1 => data2 => functions2 => data3 => ...– The only requirement is F1’s output type should match to F2’s input type– Solution : Curried functions , Monads

• No shared mutable state– Pure functions don’t change state – Functions without side-effects (mutability) – Functions are Deterministic. Data is immutable.

Imperative Programming

Functional Programming

Easy to change implementation.

With FP, Internal Iteration implementation can be changed: forEach => parallel forEach

1,000,000 users?

Functional Reactive Programming

FRP is all about effectively processing event streams without explicitly managing state.

Modern code var a = 10;var b <= a + 1;a = 20;Assert.AreEqual(21, b);

Ancient codevar a = 10;var b = a + 1;a = 11; console.log(b);

“We don't assign variables, we express them, and they don't represent discrete values, they represent a value that changes over time.”

a = b + c becomes var a = function (b,c) { return b + c }

Imperative Programming output => 11Relative Programming output => 21

a := b + c ; meant a always equals b plus c, at any time

Similarities with observer patternObserver pattern commonly describes data-flows between whole objects/classes, whereas FRP could target the members of objects/classes. Observer pattern has limitations like Unpredictable order, Leaking listeners, Threading issues, Messy State, Compositionality, Accidental recursion etc.,

Similarities with 2-way data bindingModels are updated with manual communication , in FRP they react to events

http://www.reactivemanifesto.org

FRP Terminology

Time-varying Values dynamic/evolving values (values "over time”), a.k.a DataFlow Variables , e.g., temperature , vehicle speed, Stock symbol etc.

Signals/Events ‘Changing a value’ is an Event. Anything that happens multiple times and/or that might be triggered at random intervals should be implemented as Signals/Events.

Event Streams are sources of events. Streams of timed values. These can be mouse clicks, keyboard events, mouse drag or any other input. Streams are composable. demand-driven (pull) sampling vs., data-driven (push) evaluation.

Functional Reactive Bindings controlled data binding.

AngularJS team reported that their code ran 20-40 times faster than it had previously switching to Object.observe

typeahead search with FRP

distinct stream guaranteed that events: 1. will be non-empty strings with length greater

than two2. will not occur too frequently, and 3. will not include duplicates.

This creates an event stream from all keyup and change events on the given input.The stream is transformed into a stream of strings matching the value of the input when each event occurs.

Then that stream is filtered so that subscribers to inputs will only receive events if the value of the input has a length greater than two.

Promises , Generators and FRP comparison

Service

<news></news> Model

Promise

Back End <news></news> Model

<news></news> Model

Generator

Observable (FRP)

Promise.then()

• Emit result only once

Generator.next()

• Emit results until the end• Caller driven execution

Observable.subscribe()

• Results emitted as and when available in sequence.

UI Component

Sync & Async APIs with single & multi-valued response

Single Multiple

Sync T getData() Generator<T> getData()

Async Promise<T> getData() Observable<T> getData()

synchronous scalar response Sync: multi-value iterable response, execution deferred to next() call

Async scalar response

Observable supports single value, a sequence of values or an infinite stream and enable reactive programming model.

FRP is abstracted from source of concurrency. It is not opinionated and allows the implementer to decide.

For example, an Observable API could just use calling thread to synchronously execute and respond...

or it could use a thread-pool to do the work asynchronously and callback with that thread....

or it could use multiple threads, each thread calling back via onNext(T) when the value is ready....

Your choice of concurrency implantation

or it could use actor pattern instead of a thread-pool...Do work asynchronously on an Actor (or multiple Actors)

... or NIO with even-loop...Do network access asynchronously using NIO and perform callback on Event Loop.

... or thread-pool/actor that does the work but then performs the callback via an event-loop so the thread-pool/actor is tuned for IO and event-loop for CPU.

All of those different implementation choices are possible without changing the signature of the method and without the calling code changing their behavior or how they interact with or compose responses

Asynchronous Observable with Single value Synchronous Observable with Multiple value

Asynchronous Observable with Multiple value

Client: Subscribe to Asynchronous Observer

Event StreamsWork with Event Stream instead of single events

Comprisable Functions =>

Combining via Merge

Combining via Zip , Error Handling

Composition Example

Composition Example

Return a single Map of transformed and combined data from 4 asynchronous calls

Web components are ...

Custom Elements

Decorators

<Template>

HTML Imports Object.observe

Shadow DOM

Polymer, the Web Components polyfill

DOM Mutation Observers

Pointer EventsWeb Animations

Web Components are...

The Web Components API is a collection of four different specs from the W3C designed to work together:

• HTML Templates– inert chunks of DOM activated when needed. <template>

• Custom Elements, – create new HTML elements, extend existing DOM objects.– Give them an API with properties and methods.

• Shadow DOM – style & DOM encapsulation

• HTML Imports– bundle and distribute common HTML/CSS/JS (e.g. components)

Custom Elements

1. New standards to create custom html elements.2. Encapsulation HTML and CSS into ShadowDOM.3. Mimic built-in elements as closely as possible. DOM API

treats custom elements as first-class (e.g. appendChild accepts custom elements).

4. Elements can be inserted using either HTML markup or scripts.

5. Lets designers use custom elements like HTML6. Think of HealthCare UI Components that complement to

HBS Services. Which can be used as UI building blocks to build HealthCare WebApps

Shadow DOM

Shadow DOM allows you to stuff a bunch of complex junk out of sight.

Create Your Own HTML tags

<polymer-ui-accordion>

<polymer-ui-animated-pages>

<polymer-ui-overlay>

<polymer-ui-card>

<polymer-ui-sidebar-menu>

<polymer-ui-tabs>

<polymer-ui-toggle-button>

<polymer-ui-theme-aware>

Using Custom Elements is Easy

WebApp Designer

DI vs. AMD

AngularJS inject InstancesRequireJS inject Classes

• Developers use RequireJS to asynchronously load JavaScript and establish package/import dependencies.

• Think of AngularJS DI as injecting instances and RequireJS AMD DI as injecting Classes or constructors

• Avoiding Scope Pollution• ES6 Modules ~= Java Packages• Watch out for Cyclic dependencies• DI 2.0 : Hieratical Injectors , singleton, prototype scopes

DI 2.0 with JavaScript Annotations

SPA Navigation

• Navigating deep-links with HTML5 History API and UI Router • UI driven back navigation for SPA• undo , redo , work-in-progress • 401/403: Pause for login, and show the destination page on success

Synchronized Cache

• Backend: Hibernate 2nd level cache– All shared domain instances + selective queries are cached – RESTful API bulk pagination with maxResults and offset

• Frontend: HTTP Cache – RESTful API with Last-Modified &If-Modified-Since support– RESTful API with Etag & If-None-Match support

• Frontend: angular-cache – Sensible cache configuration for each cached object type,

managed at angular service level. – ngTable module for local pagination, sort, filter– Client can specify which fields should be included in results

Backend RESTful API Item List• http://localhost:8080/Batch/drugs.json?max=2• http://localhost:8080/Batch/drugs.json?max=2&offset=100• http://localhost:8080/Batch/drugs.json?max=2&offset=100&fields=ndc,id

Item Search• http://localhost:8080/Batch/drugs/search?format=xml&labelerName=

ONVATEC&productName=AKIN• http://localhost:8080/Batch/drugs/search?format=json&

labelerName=ONVATEC&productName=AKIN&max=2

Item Details • http://localhost:8080/Batch/drugs/1?format=json • http://localhost:8080/Batch/drugs/1.json?fields=ndc,id• http://localhost:8080/Batch/drugs/1.json?fields=ndc,id,recordTypeE

SPA Authentication and Authorization

• Authentication - Show login Dialog– Http Interceptor - when server return 401 (just-in-time) – When user clicks login link in the header. – Session Expiration - when server return 419/440– Redirect to target view after successfully login.

• Permission based Access Control – Restrict UI visibility - Showing or hiding part of the screens

based on the user permissions.– Routing - When the user access a route that he doesn’t have

permission, will show error message. – Http Interceptor - when server return 403, emit event

oAuth for securing backend APIs

oAuth liberate from last mile statelessness for your backend components

Source: http://alvarosanchez.github.io/grails-spring-security-rest/docs/index.html

Double oAuth: managing 3rd party issued tokens

Source: http://alvarosanchez.github.io/grails-spring-security-rest/docs/index.html

Anatomy of the E2E App

CORS

Solution : http://software.dzhuvinov.com/cors-filter.html

The future of the web is cross-domain, not same-origin

What's Next

• Real-Time REST Services • Streaming UI Components

– WebSockets, WebRTC, polyfill: SockJS• Utilizing Backend-as-a-Services(BaaS)

– Firebase, cloud storage, notifications, social networks• Client-side ORM for REST API & API Orchestration

– Mashup and Consume REST API using SQL like DSL(ql.io)• Resiliency Annotations for JavaScript/ES7

– Circuit Breaker– Fallback – Governor (rate-limit, concurrency control)

Resources • ECMAScript 6

– http://chimera.labs.oreilly.com/books/1234000001623/ch01.html– https://github.com/google/traceur-compiler/wiki/LanguageFeatures– https://www.promisejs.org/– http://slides.com/thomasboyt/promises-102 – http://tobyho.com/2013/06/16/what-are-generators/– https://medium.com/code-adventures/174f1fe66127– http://slides.com/gerreddillon/es6-generators/fullscreen#/

• Brower support Check– http://www.chromestatus.com/features

• Testing – Protractor http://ramonvictor.github.io/protractor/slides/#/

• Gulp – http://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt/

• Modularity Matters – http://blog.safaribooksonline.com/2014/03/27/13-step-guide-angularjs-modularization/ – http://thesassway.com/beginner/how-to-structure-a-sass-project – http://smacss.com/

• Web Components – http://customelements.io/ – http://html5-demos.appspot.com/shadowdom-visualizer

• Functional Reactive Programming – http://latentflip.com/bacon-talk-realtimeconfeu/#– Functors, Applicatives, And Monads In Pictures http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html

• Securing Single Page Apps and REST Services– http://www.jamesward.com/2013/05/13/securing-single-page-apps-and-rest-services– http://alvarosanchez.github.io/grails-spring-security-rest/docs/index.html