Backendless frontend development

Slides from my first Łódź meet.js meetup talk

Transcript

3. Backendless frontend development by Michal Ostruszka @ meet.js Łódź
4. This guy Likes coding for web.
5. Roadmap Traditional webapp development model If only there was no server Challenges Existing solutions Wrap up
6. Current model Task: picture backend
12. Current model UI/client layer Server-based processing Database
13. Let's don't care about backend
14. Challenges security data storage application logic constraints complicated requirements
15. Available solutions
16. Parse
17. Parse - quick tour SDK for many platforms Storage Access control Push notifications Powerful API
18. Parse - log in P a r s e . U s e r . l o g I n ( " m y n a m e " , " m y p a s s " , { s u c c e s s : f u n c t i o n ( u s e r ) { / / D o s t u f f a f t e r s u c c e s s f u l l o g i n . } , e r r o r : f u n c t i o n ( u s e r , e r r o r ) { / / T h e l o g i n f a i l e d . C h e c k e r r o r t o s e e w h y . } } ) ;
19. Parse - register user v a r u s e r = n e w P a r s e . U s e r ( ) ; u s e r . s e t ( " u s e r n a m e " , " m y n a m e " ) ; u s e r . s e t ( " p a s s w o r d " , " m y p a s s " ) ; u s e r . s e t ( " e m a i l " , " e m a i l @ e x a m p l e . c o m " ) ; u s e r . s e t ( " p h o n e " , " 4 1 5 - 3 9 2 - 0 2 0 2 " ) ; u s e r . s i g n U p ( n u l l , { s u c c e s s : f u n c t i o n ( u s e r ) { / / H o o r a y ! L e t t h e m u s e t h e a p p n o w . } , e r r o r : f u n c t i o n ( u s e r , e r r o r ) { / / S h o w t h e e r r o r m e s s a g e s o m e w h e r e a n d l e t t h e u s e r t r y a g a i n . a l e r t ( " E r r o r : " + e r r o r . c o d e + " " + e r r o r . m e s s a g e ) ; } } ) ;
20. Parse - create & save v a r G a m e S c o r e = P a r s e . O b j e c t . e x t e n d ( " G a m e S c o r e " ) ; v a r g a m e S c o r e = n e w G a m e S c o r e ( ) ; g a m e S c o r e . s e t ( " s c o r e " , 1 3 3 7 ) ; g a m e S c o r e . s e t ( " p l a y e r N a m e " , " S e a n P l o t t " ) ; g a m e S c o r e . s e t ( " c h e a t M o d e " , f a l s e ) ; g a m e S c o r e . s a v e ( n u l l , { s u c c e s s : f u n c t i o n ( g a m e S c o r e ) { . . . } , e r r o r : f u n c t i o n ( g a m e S c o r e , e r r o r ) { . . . } } ) ;
21. Parse - relations v a r P o s t = P a r s e . O b j e c t . e x t e n d ( " P o s t " ) ; v a r C o m m e n t = P a r s e . O b j e c t . e x t e n d ( " C o m m e n t " ) ; v a r m y P o s t = n e w P o s t ( ) ; m y P o s t . s e t ( " t i t l e " , " I ' m H u n g r y " ) ; m y P o s t . s e t ( " c o n t e n t " , " W h e r e s h o u l d w e g o f o r l u n c h ? " ) ; v a r m y C o m m e n t = n e w C o m m e n t ( ) ; m y C o m m e n t . s e t ( " c o n t e n t " , " L e t ' s d o S u s h i r r i t o . " ) ; m y C o m m e n t . s e t ( " p a r e n t " , m y P o s t ) ; m y C o m m e n t . s a v e ( ) ; } ) ;
22. Parse - more queries, promises-based api, files upload roles, FB auth, own functions, push, views
23. Firebase
24. Firebase - quick tour Real-time sync First-class security Scalable Framework wrappers
25. Firebase - log in v a r c h a t R e f = n e w F i r e b a s e ( ' h t t p s : / / S a m p l e C h a t . f i r e b a s e . c o m ' ) ; v a r a u t h = n e w F i r e b a s e S i m p l e L o g i n ( c h a t R e f , f u n c t i o n ( e r r o r , u s e r ) { i f ( e r r o r ) { c o n s o l e . l o g ( e r r o r ) ; } e l s e i f ( u s e r ) { c o n s o l e . l o g ( ' I D : ' + u s e r . i d + ' , P r o v i d e r : ' + u s e r . p r o v i d e r ) ; } e l s e { / / u s e r i s l o g g e d o u t } } ) ; a u t h . l o g i n ( ' P R O V I D E R ' ) ; / / F B , T W T R , G H , P e r s o n a
26. Firebase - create & save v a r n a m e = n e w F i r e b a s e ( ' h t t p s : / / a p p . f i r e b a s e . c o m / u s e r s / f r e d / n a m e ' ) ; n a m e . c h i l d ( ' f i r s t ' ) . s e t ( ' F r e d ' ) ; n a m e . c h i l d ( ' l a s t ' ) . s e t ( ' S w a n s o n ' ) ; / / o r n a m e . s e t ( { f i r s t : ' F r e d ' , l a s t : ' S w a n s o n ' } ) ; / / o r n a m e . u p d a t e ( { f i r s t : ' F r e d ' , l a s t : ' S w a n s o n ' } ) ;
27. Firebase - presence v a r p r e s e n c e = n e w F i r e b a s e ( ' h t t p s : / / a p p . f i r e b a s e . c o m / d i s c o n n e c t ' ) ; / / W r i t e a s t r i n g w h e n I l o s e m y c o n n e c t i o n p r e s e n c e . o n D i s c o n n e c t ( ) . s e t ( " I d i s c o n n e c t e d ! " ) ;
28. Firebase - more limited queries (start, end), transactions available bindings for NG, Ember, Backbone
29. Hoodie Not really no-backend, but...
30. Hoodie is git + CouchDB + node.js
31. Hoodie - howto v a r h o o d i e = n e w H o o d i e ( ' h t t p : / / l o c a l h o s t : 6 6 6 6 / _ a p i ' ) ; v a r a c c o u n t = h o o d i e . a c c o u n t ; a c c o u n t . s i g n U p ( ' j o e @ e x a m p l e . c o m ' , ' s e c r e t ' ) ; a c c o u n t . s i g n I n ( ' j o e @ e x a m p l e . c o m ' , ' s e c r e t ' ) ; a c c o u n t . s i g n O u t ( ) ; a c c o u n t . c h a n g e P a s s w o r d ( ' c u r r e n t p a s s w o r d ' , ' n e w p a s s w o r d ' ) ; a c c o u n t . c h a n g e U s e r n a m e ( ' c u r r e n t p a s s w o r d ' , ' n e w u s e r n a m e ' ) ; a c c o u n t . r e s e t P a s s w o r d ( ' j o e @ e x a m p l e . c o m ' ) ; a c c o u n t . d e s t r o y ( ) ; a c c o u n t . u s e r n a m e ; / / e v e n t s h o o d i e . a c c o u n t . o n ( ' s i g n u p ' , f u n c t i o n ( u s e r ) { } ) ;
32. Hoodie - storage Hoodie will only sync data to the database if it belongs to a user / / s t o r e v a r t y p e = ' t a s k ' ; v a r a t t r i b u t e s = { s t a t u s : ' o p e n ' } ; h o o d i e . s t o r e . a d d ( t y p e , a t t r i b u t e s ) . d o n e ( f u n c t i o n ( n e w O b j e c t ) { } ) ; / / u p d a t e v a r t y p e = ' t a s k ' ; v a r i d = ' a b c 4 5 6 7 ' ; v a r u p d a t e = { s t a r r e d : t r u e } ; h o o d i e . s t o r e . u p d a t e ( t y p e , i d , u p d a t e ) . d o n e ( f u n c t i o n ( u p d a t e d O b j e c t ) { } ) ;
33. Hoodie - sync Auto sync for logged in user Subscribe for local updates (events) Subscribe for remote updates h o o d i e . s t o r e . o n ( ' a d d ' , f u n c t i o n ( n e w O b j e c t ) { } ) ; h o o d i e . r e m o t e . o n ( ' a d d ' , f u n c t i o n ( n e w O b j e c t ) { } ) ;
34. Hoodie - sharing By default all data is private for user User can share object explicitly WARN: Still work in progress / / a d d a n e w s h a r e h o o d i e . s h a r e . a d d ( ) . d o n e ( f u n c t i o n ( s h a r e ) { } ) ; / / g r a n t / r e v o k e a c c e s s s h a r e . g r a n t R e a d A c c e s s ( ) ; s h a r e . g r a n t W r i t e A c c e s s ( ) ; s h a r e . r e v o k e R e a d A c c e s s ( ) ; s h a r e . r e v o k e W r i t e A c c e s s ( ) ; s h a r e . g r a n t R e a d A c c e s s ( ' j o e @ e x a m p l e . c o m ' ) ; s h a r e . r e v o k e W r i t e A c c e s s ( [ ' j o e @ e x a m p l e . c o m ' , ' l i s a @ e x a m p l e . c o m ' ] ) ;
35. Hoodie - extending Write own plugins for both front and backend
36. Other solutions backendless deployd kinvey
37. Why would I use it?
38. EOT - thanks