Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

WebApp / SPA @ AllFacebook Developer Conference

5.561 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
  • Als Erste(r) kommentieren

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

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

×