Your SlideShare is downloading. ×
WebApp / SPA @ AllFacebook Developer Conference
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WebApp / SPA @ AllFacebook Developer Conference

4,706

Published on

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

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

Published in: Social Media, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,706
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. /   /   WebApp  /  SPA  
  • 2. Server  Side  Rendered  Applica3ons   1.  Request   /user  
  • 3. Server  Side  Rendered  Applica3ons   1.  Request   /user   2.  Webserver   Looking  for  correct  App,  Spawn  Processes  
  • 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. 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. Server  Side  Rendered  Applica3ons   1.  Request   /user/1  
  • 7. Server  Side  Rendered  Applica3ons   1.  Request   /user/1   2.  Webserver   Looking  for  correct  App,  Spawn  Processes  
  • 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. 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. But…  why?   •  •  •  •  Current  user   User  rights   Friends   …  
  • 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. 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. Why  now?   •  •  •  •  •  JavaScript  Performance  /  Acceptance   Web  Sockets   WebGL   FileReader  API   Web  Workers  
  • 14. Frameworks:  AngularJS   •  Backed  by  Google  
  • 15. Frameworks:  EmberJS   •  Backed  by  Yehuda  Katz  
  • 16. Frameworks:  React   •  Backed  by  Facebook  +  Instagram  
  • 17. Rethink…  Databinding   •  Data  is  mainly  processed  in  your  browser  
  • 18. Rethink…  XHR   •  Websockets  send  Data  “via  push”   •  No  Longpolling,  No  Interval  Polling   •  à  Good  for  your  Server  
  • 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. 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. Rethink…  URLs   •  You  s3ll  need  URLs   –  Deeplinks:  Sharing,  Likes   –  User  need  them  (for  some  reason…)   •  Rou3ng  via  JavaScript  
  • 22. Rethink…  UX   •  UI  is  very  fast…   •  Reac3on  could  be  unexpected   –  Add  Loading  Behavior   –  Don’t  forget  Error  Handling   •  Messages   •  Offline  Mode?  
  • 23. We  are  already  building  SPA!   •  jQuery   •  “No  Flash”   •  AJAX  
  • 24. Challenges:  SEO   •  Google  can  read  /  execute  JavaScript…  
  • 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. Challenges:  SEO   •  AJAX…  (#!Hashbang)  
  • 27. Challenges:  SEO   •  phantomJS   •  Prerendered  HTML   •  Via  #!  à  escaped_fragment  
  • 28. Challenges:  SEO   •  phantomJS   •  Prerendered  HTML   •  Via  #!  à  escaped_fragment      Facbook  Open  Graph  
  • 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. Conclusion   •  •  •  •  SPA  supercharge  your  Canvas  /  Tab  Apps   Reduce  server  costs   Can  reduce  development  costs   Are  JavaScript  (which  is  awesome…)  
  • 31. //   CONTACT   FLORIAN.BERGMANN@FLOBBYMEDIA.DE @FLOBBY

×