Backend Interfaces for Mobile Hybrid Development / Jan Peuker Alex Rudenko / Nov 2, 2014 Singasug Based on Reveal.js by / Hakim El Hattab @hakimel Print View

#WIP We give talks to learn ourselves

Recap Mobile Architecture Occasionally connected, , High Throughput, High Variance , Adaptive, Gracefully Degradable Pervasive: , , Multi/Omni-Screen/Device Out of Control, - , Unsecured Access infrequent better High Latency Responsive Mobile First Fluid Multi Version

Recap Mobile Integration Access Verb: State synced through commands, minimal data : State and Data transition, minimal commands Concurrency Sync: MVC/3-Tier, Form submission, RMI/SOFEA, Snapshot Versioning : Android Providers + Intents, iOS Core Data + Queue Noun Async => Noun/Sync a.k.a. Data Synchronization prevalent (e.g. SAP)

From Client-Server to distributed Systems Concurrent data and process versions with minimal downtime for upgrades Maximum Decoupling Maximum Resilience Fueled by , , Continuous Delivery, , Fueled by , Analytics/Heuristics, Product/Design Fueled by , , SDN, Elastic Scalability Agile distributed SCM DevOps Infrastructure as Code Lean Thinking Virtualization Cloud

Resource-Driven Integration REST already has distributed state, caching and versioning HTTP in public Internet can be leveraged can be leveraged application patterns resemble the Web / Hype due to multi-paradigm access Security is still a problem (Entitlements/RBAC not solved) Infrastructure Hypermedia ROCA API Microservice

Spring HATEOAS Example @ C o n t r o l l e r @ R e q u e s t M a p p i n g ( " / s t o c k s " ) @ E n a b l e H y p e r m e d i a S u p p o r t ( t y p e = H y p e r m e d i a T y p e . H A L ) c l a s s P e r s o n C o n t r o l l e r { @ R e q u e s t M a p p i n g ( m e t h o d = R e q u e s t M e t h o d . G E T ) p u b l i c R e s p o n s e E n t i t y < S t o c k > s h o w A l l ( ) { … } @ R e q u e s t M a p p i n g ( v a l u e = " / { s y m b o l } " , m e t h o d = R e q u e s t M e t h o d . G E T ) p u b l i c R e s p o n s e E n t i t y < S t o c k > s h o w ( @ P a t h V a r i a b l e S t r i n g s y m b o l ) { . . . L i n k l i n k = L i n k l i n k = l i n k s . l i n k T o S i n g l e R e s o u r c e ( S t o c k P r i c e . c l a s s , s y m b o l ) ; . . . h e a d e r s . s e t C o n t e n t T y p e ( M e d i a T y p e . p a r s e M e d i a T y p e ( " a p p l i c a t i o n / v n d . j a n p e u k e r . s t o c k s + j s o n ; v e r s i o n = 1 . 0 " ) ) ; h e a d e r s . s e t E T a g ( s t o c k . g e t V e r s i o n e d U n i q u e I d ( ) ) h e a d e r s . s e t P r a g m a ( " c a c h e " ) ; h e a d e r s . s e t E x p i r e s ( Z o n e d D a t e T i m e . n o w ( ) . p l u s ( s t o c k . g e t V a l i d i t y A s T e m p o r a l A m o u n t ( ) ) . t o I n s t a n t ( ) . t o E p o c h M i l l i ( ) ) ; . . . } } Versioning and Naming (e.g. ) is the tricky question to answer here. JSON API A JAX-RS example can be found at Heroku Courtesy of . highlight.js

Hybrid Development Hybrid HTML 5 is ready Natural choice as problems solved in HTTP Security and caching can be customized in native container Device UI argument gets weaker (e.g. Traction to go HTML 5 (SAP, IBM, Titanium, Kony, Xamarin) Material Design)

Distributed Processing on Resources vs. traditional Sync Offline First Hybrid changes Integration to more Async (Single Thread updates DOM as ViewModel), use of HTML 5 Storage Integration model includes State Transfer Data-binding on allows fine-granular sync e.g. provides Binding and Event Bus MVVM Backbone

Single Page Web Apps Using the Browser as Engine for RIA pattern includes Routing, Templating Very similar to Hybrid Applications, only Framework native provides , better Testability Dependencies tricky, look at WebJars and Use , Server Rendering, then Changes E.g. and (uses Backbone) Single Page Application AngularJS separation Yeoman/Bower/RequireJS Progressive Enhancement LazoJS Rendr

Future of Interfaces Omni/Multi/Cross-Channel approaches Multiple Screens/Devices at the same time Network session decoupled from User Session cannot be solved efficiently with Databinding Hybrid components reused e.g. Web Components Components in JavaScript reuse Domain Model Multiscreen Polymer Server-Side

Reactive Applications Eventstream-driven applications, distributed share-nothing is Responsive, Elastic, Resilient, Message-Driven Event Bus spanning the Client e.g. , Angular Event Bus Clients retrieve shorter, incremental, update blocks e.g. WebSockets, HTML5 SSE, Comet, Long Polling enables and Event-Sourcing update syncable Cache A centralized requires a Domain-Driven-Design Information architecture from Direct Manipulation to Conflict Resolution Reactive Atmosphere Actor model Log

Back-End Implications Stateless Interfaces, Graceful Degradation, Data Retention Versions forbid heavy state and contracts, e.g. View Model in Services, Client-Side Cache Deployments have to be faster, less side-effects State and Sessions need to externalized, security-integrated ...Developers become in addition to DevOps Interesting developments in the Java sphere: /Async Servlets can be used for constructing state e.g. with State Management Data Grid and Hazelcast, Gemfire comes with Async support Vert.x Polyglot Java 8 Streams Kafka JSR 350 JSR 347 JHipster

React.js and Atmosphere Streams and Components combined is a library to build UI components Reusable Components One-way data flow Virtual DOM Server-Side Rendering is a Java/JavaScript framework for asynchronous processes An example is the React.js Atmosphere Twitter Stream API

React.js example with Atmosphere v a r S t o c k A p p = R e a c t . c r e a t e C l a s s ( { g e t I n i t i a l S t a t e : f u n c t i o n ( ) { r e t u r n { d a t a : i n i t i a l _ d a t a } ; } , t i c k : f u n c t i o n ( ) { v a r m e s s a g e = g e t R a n d o m M e s s a g e ( ) ; / / F i n d s y m b o l v a r d a t a = t h i s . s t a t e . d a t a ; d a t a . c o n t e n t . f o r E a c h ( f u n c t i o n ( e n t r y ) { i f ( e n t r y . s y m b o l = = = m e s s a g e . s y m b o l ) { e n t r y . p r i c e = m e s s a g e . p r i c e ; e n t r y . c h a n g e = m e s s a g e . c h a n g e ; } } ) ; t h i s . s e t S t a t e ( { d a t a : d a t a } ) ; } , c o m p o n e n t D i d M o u n t : f u n c t i o n ( ) { t h i s . i n t e r v a l = s e t I n t e r v a l ( t h i s . t i c k , 1 5 0 ) ; } , c o m p o n e n t W i l l U n m o u n t : f u n c t i o n ( ) { c l e a r I n t e r v a l ( t h i s . i n t e r v a l ) ; } , r e n d e r : f u n c t i o n ( ) { v a r s t o c k s = t h i s . s t a t e . d a t a . c o n t e n t . m a p ( f u n c t i o n ( s t o c k ) { r e t u r n ( / / T O D O

Testing of React.js Unit Testing React.js With Jasmine and Karma d e s c r i b e ( " L a b e l T e s t " , f u n c t i o n ( ) { b e f o r e E a c h ( f u n c t i o n ( ) { R e a c t T e s t U t i l s = R e a c t . a d d o n s . R e a c t T e s t U t i l s ; } ) ; i t ( " C h e c k T e x t A s s i g n m e n t " , f u n c t i o n ( ) { v a r l a b e l = R e a c t T e s t U t i l s . r e n d e r I n t o D o c u m e n t ( l a b e l ) ; e x p e c t ( l a b e l . r e f s . p ) . t o B e D e f i n e d ( ) ; e x p e c t ( l a b e l . r e f s . p . p r o p s . c h i l d r e n ) . t o B e ( " S o m e T e x t W e N e e d f o r T e s t " ) } ) ; i t ( " C l i c k " , f u n c t i o n ( ) { v a r l a b e l = R e a c t T e s t U t i l s . r e n d e r I n t o D o c u m e n t ( l a b e l ) ; R e a c t T e s t U t i l s . S i m u l a t e . c l i c k ( l a b e l . r e f s . p ) ; e x p e c t ( l a b e l . r e f s . p . p r o p s . c h i l d r e n ) . t o B e ( " T e x t A f t e r C l i c k " ) ; } ) ; } ) ; < l a b e l > S o m e T e x t W e N e e d f o r T e s t < / l a b e l > ; < l a b e l > S o m e T e x t W e N e e d t o T e s t < / l a b e l > ;

Summary Systems as streams in hyperconnected networks Mobile cuts through tiers and channels, Datasync is only half a solution Decouple Context, Sessions, State and Services - persist them Think applications as streams of events spanning across devices Embrace agility, fluid, evolutionary change - and maybe versions

No questions lah! Thanks! / Jan Peuker Alex Rudenko Talk and Code at GitHub