Downloaded 21 times
Uploaded byAaron White
Ultra-modern Front-end Dev & Introducing Spar
The document discusses ultra-modern front-end architectures and highlights the complexities and challenges associated with server and client responsibilities in web development. It proposes a 'single UI app packet' approach that provides separation of concerns and improves loading performance, while introducing 'spar' for streamlined single-page app development. The talk emphasizes benefits, such as fast user experience, as well as challenges like increased front-end complexity and build dependencies.
More Related Content
Similar to Ultra-modern Front-end Dev & Introducing Spar
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 BrendanEich went all... GET Server 200 OK HTML
- 4. but then BrendanEich went all... GET Server 200 OK HTML
- 5. but then BrendanEich went all... GET Server 200 OK HTML ...and sh*t got real
- 6.
- 7. Problem #1: Redundant HTMLrendering (Server-code & JS)
- 8. Problem #2: DuplicatedLogic (Server-code & JS)
- 9. Problem #3: Coordinating URLSpace (Across Server & Client)
- 10. Problem #4: Who’s responsiblefor what?
- 11. What’s my serverdoing? Database negotiations Business Logic URL management UI/HTML rendering JSON rendering
- 12. What’s my clientdoing? Maintaining state Business Logic URL management UI/HTML rendering
- 13. What should theserver be doing? Authority on request integrity Accessing/updating DB Serving data
- 14. What should theclient be doing? Render UI Interactivity Logical requests to server UI state management (URL)
- 15. So how aboutthis... Single UI App ‘packet’ upfront GET / POST API { json } Server only
- 16. We can doeven better.... CDN Single UI ‘packet’ upfront GET / POST API { json } Server only
- 17. Server: now, HTML-ZERO That’skind of amazing for a web-app, and increasingly, the future
- 18.
- 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 Increasedbuild / 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 TONof Javascript A TON of CSS App organization
- 23.
- 24.
- 25.
- 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 builtto.... 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 $ geminstall spar $ spar new myapp $ cd myapp $ spar server
- 33. Sample App $ gitclone git@github.com:GoBoundless/spar-examples.git $ cd spar-examples/todos $ spar server
- 35. Thank you! @aaronwhite and Team Boundless
- 36.