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

Backendless frontend development

Backendless frontend development

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

Michal Ostruszka

December 10, 2013
Tweet

More Decks by Michal Ostruszka

Other Decks in Programming

Transcript

  1. Roadmap Traditional webapp development model If only there was no

    server Challenges Existing solutions Wrap up
  2. Parse - quick tour SDK for many platforms Storage Access

    control Push notifications Powerful API
  3. 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 . } } ) ;
  4. 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 ) ; } } ) ;
  5. 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 ) { . . . } } ) ;
  6. 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 ( ) ; } ) ;
  7. 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
  8. 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 ' } ) ;
  9. 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 ! " ) ;
  10. 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 ) { } ) ;
  11. 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 ) { } ) ;
  12. 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 ) { } ) ;
  13. 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 ' ] ) ;