/	
  
/	
  

WebApp	
  /	
  SPA	
  
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user	
  
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user	
  

2.  Webserver	
  
Looking	
  for	
  correct	
  Ap...
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user	
  

2.  Webserver	
  
Looking	
  for	
  correct	
  Ap...
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user	
  

2.  Webserver	
  
Looking	
  for	
  correct	
  Ap...
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user/1	
  
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user/1	
  

2.  Webserver	
  
Looking	
  for	
  correct	
  ...
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user/1	
  

2.  Webserver	
  
Looking	
  for	
  correct	
  ...
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user/1	
  

2.  Webserver	
  
Looking	
  for	
  correct	
  ...
But…	
  why?	
  
• 
• 
• 
• 

Current	
  user	
  
User	
  rights	
  
Friends	
  
…	
  
What	
  if…	
  
•  The	
  Server	
  only	
  needs	
  to	
  send	
  data	
  that	
  
changed?	
  
•  Business	
  Logic	
  a...
Benefits	
  
•  Shaky	
  Internet?	
  No	
  Problem!	
  
•  Server	
  load	
  is	
  reduced	
  (which	
  means	
  costs	
  ...
Why	
  now?	
  
• 
• 
• 
• 
• 

JavaScript	
  Performance	
  /	
  Acceptance	
  
Web	
  Sockets	
  
WebGL	
  
FileReader	
...
Frameworks:	
  AngularJS	
  
•  Backed	
  by	
  Google	
  
Frameworks:	
  EmberJS	
  
•  Backed	
  by	
  Yehuda	
  Katz	
  
Frameworks:	
  React	
  
•  Backed	
  by	
  Facebook	
  +	
  Instagram	
  
Rethink…	
  Databinding	
  
•  Data	
  is	
  mainly	
  processed	
  in	
  your	
  browser	
  
Rethink…	
  XHR	
  
•  Websockets	
  send	
  Data	
  “via	
  push”	
  
•  No	
  Longpolling,	
  No	
  Interval	
  Polling	...
Rethink…	
  Storing	
  of	
  Data	
  
•  Vars	
  are	
  “always	
  available”	
  
•  Web	
  Storage	
  
–  Your	
  new	
  ...
Rethink…	
  Authen3ca3on	
  
•  Crazy	
  People:	
  I	
  logout,	
  You	
  login…	
  
–  The	
  good:	
  Clear	
  the	
  e...
Rethink…	
  URLs	
  
•  You	
  s3ll	
  need	
  URLs	
  
–  Deeplinks:	
  Sharing,	
  Likes	
  
–  User	
  need	
  them	
  ...
Rethink…	
  UX	
  
•  UI	
  is	
  very	
  fast…	
  
•  Reac3on	
  could	
  be	
  unexpected	
  
–  Add	
  Loading	
  Behav...
We	
  are	
  already	
  building	
  SPA!	
  
•  jQuery	
  
•  “No	
  Flash”	
  
•  AJAX	
  
Challenges:	
  SEO	
  
•  Google	
  can	
  read	
  /	
  execute	
  JavaScript…	
  
Challenges:	
  SEO	
  
“If	
  fancy	
  features	
  such	
  as	
  JavaScript,	
  
cookies,	
  session	
  IDs,	
  frames,	
 ...
Challenges:	
  SEO	
  
•  AJAX…	
  (#!Hashbang)	
  
Challenges:	
  SEO	
  
•  phantomJS	
  
•  Prerendered	
  HTML	
  
•  Via	
  #!	
  à	
  escaped_fragment	
  
Challenges:	
  SEO	
  
•  phantomJS	
  
•  Prerendered	
  HTML	
  
•  Via	
  #!	
  à	
  escaped_fragment	
  

	
  

	
  F...
Challenges:	
  Backend	
  
•  Frontend	
  JavaScript	
  /	
  Backend	
  JavaScript	
  
–  Reuse	
  Modules	
  /	
  Busines...
Conclusion	
  
• 
• 
• 
• 

SPA	
  supercharge	
  your	
  Canvas	
  /	
  Tab	
  Apps	
  
Reduce	
  server	
  costs	
  
Can...
//	
   CONTACT	
  
FLORIAN.BERGMANN@FLOBBYMEDIA.DE
@FLOBBY
WebApp / SPA @ AllFacebook Developer Conference
WebApp / SPA @ AllFacebook Developer Conference
WebApp / SPA @ AllFacebook Developer Conference
WebApp / SPA @ AllFacebook Developer Conference
WebApp / SPA @ AllFacebook Developer Conference
WebApp / SPA @ AllFacebook Developer Conference
WebApp / SPA @ AllFacebook Developer Conference
Nächste SlideShare
Wird geladen in …5
×

WebApp / SPA @ AllFacebook Developer Conference

5.416 Aufrufe

Veröffentlicht am

Vortrag "Facebook Apps als WebApp: Konzepte und Grundlagen zur Realisierung" von Florian Bergmann auf der AllFacebook Developer Conference in Berlin 2013.

Mehr Informationen zur Konferenz und zum Slot:
http://conference.allfacebook.de/devcon/berlin2013/programm/#8

Veröffentlicht in: Soziale Medien, Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
5.416
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3.348
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

WebApp / SPA @ AllFacebook Developer Conference

  1. 1. /   /   WebApp  /  SPA  
  2. 2. Server  Side  Rendered  Applica3ons   1.  Request   /user  
  3. 3. Server  Side  Rendered  Applica3ons   1.  Request   /user   2.  Webserver   Looking  for  correct  App,  Spawn  Processes  
  4. 4. Server  Side  Rendered  Applica3ons   1.  Request   /user   2.  Webserver   Looking  for  correct  App,  Spawn  Processes   3.  Rou3ng  Controller   Database  Requests   Rendering  of  Response  
  5. 5. Server  Side  Rendered  Applica3ons   1.  Request   /user   2.  Webserver   Looking  for  correct  App,  Spawn  Processes   3.  Rou3ng  Controller   Database  Requests   Rendering  of    User  List  Page   4.  Response   User  receives  Result  à  HTML  Document  with  List  of  all   Users  
  6. 6. Server  Side  Rendered  Applica3ons   1.  Request   /user/1  
  7. 7. Server  Side  Rendered  Applica3ons   1.  Request   /user/1   2.  Webserver   Looking  for  correct  App,  Spawn  Processes  
  8. 8. Server  Side  Rendered  Applica3ons   1.  Request   /user/1   2.  Webserver   Looking  for  correct  App,  Spawn  Processes   3.  Rou3ng  Controller   Database  Requests   Rendering  of  User  Detail  Page  
  9. 9. Server  Side  Rendered  Applica3ons   1.  Request   /user/1   2.  Webserver   Looking  for  correct  App,  Spawn  Processes   3.  Rou3ng  Controller   Database  Requests   Rendering  of  User  Detail  Page   4.  Response   User  receives  Result  
  10. 10. But…  why?   •  •  •  •  Current  user   User  rights   Friends   …  
  11. 11. What  if…   •  The  Server  only  needs  to  send  data  that   changed?   •  Business  Logic  and  Valida3ons  live  in  the   Browser?   •  User  can  flawless  navigate  through  “pages”   without  sending  Server  requests?  
  12. 12. Benefits   •  Shaky  Internet?  No  Problem!   •  Server  load  is  reduced  (which  means  costs  are   reduced…)   •  Easy  to  scale  (CDN  for  Sta3c  Files)   •  Lot  of  content  is  cached  but  s3ll  dynamic   •  Eat  your  own  dogfood!  
  13. 13. Why  now?   •  •  •  •  •  JavaScript  Performance  /  Acceptance   Web  Sockets   WebGL   FileReader  API   Web  Workers  
  14. 14. Frameworks:  AngularJS   •  Backed  by  Google  
  15. 15. Frameworks:  EmberJS   •  Backed  by  Yehuda  Katz  
  16. 16. Frameworks:  React   •  Backed  by  Facebook  +  Instagram  
  17. 17. Rethink…  Databinding   •  Data  is  mainly  processed  in  your  browser  
  18. 18. Rethink…  XHR   •  Websockets  send  Data  “via  push”   •  No  Longpolling,  No  Interval  Polling   •  à  Good  for  your  Server  
  19. 19. Rethink…  Storing  of  Data   •  Vars  are  “always  available”   •  Web  Storage   –  Your  new  BFF     •  Backend  (hey…  it’s  his  job…)   –  Lean  API   –  Op3mized  Requests  
  20. 20. Rethink…  Authen3ca3on   •  Crazy  People:  I  logout,  You  login…   –  The  good:  Clear  the  environment   –  The  bad:  Don’t  care…   –  The  ugly:  Reload  on  logout   •  Error  Handling   –  403  à  Alarm?  
  21. 21. Rethink…  URLs   •  You  s3ll  need  URLs   –  Deeplinks:  Sharing,  Likes   –  User  need  them  (for  some  reason…)   •  Rou3ng  via  JavaScript  
  22. 22. Rethink…  UX   •  UI  is  very  fast…   •  Reac3on  could  be  unexpected   –  Add  Loading  Behavior   –  Don’t  forget  Error  Handling   •  Messages   •  Offline  Mode?  
  23. 23. We  are  already  building  SPA!   •  jQuery   •  “No  Flash”   •  AJAX  
  24. 24. Challenges:  SEO   •  Google  can  read  /  execute  JavaScript…  
  25. 25. Challenges:  SEO   “If  fancy  features  such  as  JavaScript,   cookies,  session  IDs,  frames,  DHTML,  or   Flash  keep  you  from  seeing  all  of  your  site   in  a  text  browser,  then  search  engine   spiders  may  have  trouble  crawling  your   site”  
  26. 26. Challenges:  SEO   •  AJAX…  (#!Hashbang)  
  27. 27. Challenges:  SEO   •  phantomJS   •  Prerendered  HTML   •  Via  #!  à  escaped_fragment  
  28. 28. Challenges:  SEO   •  phantomJS   •  Prerendered  HTML   •  Via  #!  à  escaped_fragment      Facbook  Open  Graph  
  29. 29. Challenges:  Backend   •  Frontend  JavaScript  /  Backend  JavaScript   –  Reuse  Modules  /  Business  Logic   •  Fast  Architecture  à  Lightweight   –  NGINX   –  nodeJS   •  API  Queries  via  JavaScript  /  Frontend   –  Don’t  forget  to  use  Field  Expansion   –  And  Batch  Requests  
  30. 30. Conclusion   •  •  •  •  SPA  supercharge  your  Canvas  /  Tab  Apps   Reduce  server  costs   Can  reduce  development  costs   Are  JavaScript  (which  is  awesome…)  
  31. 31. //   CONTACT   FLORIAN.BERGMANN@FLOBBYMEDIA.DE @FLOBBY

×