Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2014-11-04 - Backend Interfaces for Mobile Hybr...

SingaSUG
November 07, 2014

2014-11-04 - Backend Interfaces for Mobile Hybrid Development

From Jan Peuker and Alex Rudenko

SingaSUG

November 07, 2014
Tweet

More Decks by SingaSUG

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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)
  4. 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
  5. 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
  6. 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
  7. 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)
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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 > ;
  16. 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