Embed Size (px)
DESCRIPTION
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
Citation preview
WebApp / SPA / / /
Server Side Rendered Applica3ons
1. Request /user
Server Side Rendered Applica3ons
1. Request /user
2. Webserver Looking for correct App, Spawn Processes
Server Side Rendered Applica3ons
1. Request /user
2. Webserver Looking for correct App, Spawn Processes
3. Rou3ng Controller Database Requests Rendering of Response
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
Server Side Rendered Applica3ons
1. Request /user/1
Server Side Rendered Applica3ons
1. Request /user/1
2. Webserver Looking for correct App, Spawn Processes
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
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
But… why?
• Current user • User rights • Friends • …
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?
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!
Why now?
• JavaScript Performance / Acceptance • Web Sockets • WebGL • FileReader API • Web Workers
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
• à Good for your Server
Rethink… Storing of Data
• Vars are “always available” • Web Storage – Your new BFF
• Backend (hey… it’s his job…) – Lean API – Op3mized Requests
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?
Rethink… URLs
• You s3ll need URLs – Deeplinks: Sharing, Likes – User need them (for some reason…)
• Rou3ng via JavaScript
Rethink… UX
• UI is very fast… • Reac3on could be unexpected – Add Loading Behavior – Don’t forget Error Handling
• Messages • Offline Mode?
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, 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”
Challenges: SEO
• AJAX… (#!Hashbang)
Challenges: SEO
• phantomJS • Prerendered HTML • Via #! à escaped_fragment
Challenges: SEO
• phantomJS • Prerendered HTML • Via #! à escaped_fragment
Facbook Open Graph
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
Conclusion
• SPA supercharge your Canvas / Tab Apps • Reduce server costs • Can reduce development costs • Are JavaScript (which is awesome…)
/ CONTACT / / [email protected] @FLOBBY
