Ultra-modern Front-end Dev & Introducing Spar
•Download as KEY, PDF•
5 likes•2,608 views
This deck presents Boundless's approach to modern front-end dev: specifically, a completely decoupled web architecture, where the client experience is a single page web app served entirely from a CDN, and the app servers are only used to service JSON request/response transactions. Additionally, we introduce our pure front-end framework, Spar, that accelerates single-page web-app development
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Ultra-modern Front-end Dev & Introducing Spar
Similar to Ultra-modern Front-end Dev & Introducing Spar (20)
Recently uploaded
Recently uploaded (20)
Ultra-modern Front-end Dev & Introducing Spar
- 1. Ultra-Modern Front End Architectures @aaronwhite Boundless CTO, Co-founder http://github.com/GoBoundless
- 2. In the beginning Sir Tim Berners Lee said... GET CERN HTTPd WorldWideWeb 200 OK HTML ...and it was OK
- 3. but then Brendan Eich went all... GET Server 200 OK HTML
- 4. but then Brendan Eich went all... GET Server 200 OK HTML
- 5. but then Brendan Eich went all... GET Server 200 OK HTML ...and sh*t got real
- 7. Problem #1: Redundant HTML rendering (Server-code & JS)
- 8. Problem #2: Duplicated Logic (Server-code & JS)
- 9. Problem #3: Coordinating URL Space (Across Server & Client)
- 10. Problem #4: Who’s responsible for what?
- 11. What’s my server doing? Database negotiations Business Logic URL management UI/HTML rendering JSON rendering
- 12. What’s my client doing? Maintaining state Business Logic URL management UI/HTML rendering
- 13. What should the server be doing? Authority on request integrity Accessing/updating DB Serving data
- 14. What should the client be doing? Render UI Interactivity Logical requests to server UI state management (URL)
- 15. So how about this... Single UI App ‘packet’ upfront GET / POST API { json } Server only
- 16. We can do even better.... CDN Single UI ‘packet’ upfront GET / POST API { json } Server only
- 17. Server: now, HTML-ZERO That’s kind of amazing for a web-app, and increasingly, the future
- 19. Benefits: Fast first page-loads, lightning fast thereafter Very fast user-experience Clean separation of concerns between server/client Front-end completely back-end agnostic API easily serves mobile, 3rd party, etc
- 20. Challenges: Increased front-end complexity Increased build / deployment complexity Modern browsers only (but thank god!) SEO complicated (a whole other presentation)
- 21. Challenge #1: Increased Front-End Complexity
- 22. Front-End Complexity A TON of Javascript A TON of CSS App organization
- 23. Pro-tip #1: HAML
- 24. Pro-tip #2: SASS
- 26. Pro-tip #4: MVC ...and plenty of others find the one that works for you: http://addyosmani.github.com/todomvc/
- 27. Challenge #2: Build / Deployment Complexity
- 28. CoffeScript CoffeScript JS Packet CoffeScript SASS CDN SASS CSS Packet SASS HTML / Image Assets (coordinate against API changes)
- 29. Introducing Spar* http://goboundless.github.com/spar *single page app rocketship
- 30. Spar was built to.... Accelerate local single page app development Support for Coffeescript, SASS, Haml, Less, etc Handle asset compilation & stitching 1-command deploys to Heroku, S3, Cloudfront etc Extensible
- 31. Spar handles your front-end You build your API anyway you like We happen to prefer Scala, Unfiltered and MongoDB
- 32. Getting Started $ gem install spar $ spar new myapp $ cd myapp $ spar server
- 33. Sample App $ git clone git@github.com:GoBoundless/spar-examples.git $ cd spar-examples/todos $ spar server
- 35. Thank you! @aaronwhite and Team Boundless
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n