Ultra-modern Front-end Dev & Introducing Spar

3,135 views
2,907 views

Published on

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

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

No Downloads
Views
Total views
3,135
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \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
  • Ultra-modern Front-end Dev & Introducing Spar

    1. 1. Ultra-ModernFront EndArchitectures @aaronwhite Boundless CTO, Co-founder http://github.com/GoBoundless
    2. 2. In the beginning Sir Tim Berners Lee said... GET CERN HTTPdWorldWideWeb 200 OK HTML ...and it was OK
    3. 3. but then Brendan Eich went all... GET Server 200 OK HTML
    4. 4. but then Brendan Eich went all... GET Server 200 OK HTML
    5. 5. but then Brendan Eich went all... GET Server 200 OK HTML ...and sh*t got real
    6. 6. real complicated
    7. 7. Problem #1:Redundant HTML rendering (Server-code & JS)
    8. 8. Problem #2: Duplicated Logic(Server-code & JS)
    9. 9. Problem #3:Coordinating URL Space(Across Server & Client)
    10. 10. Problem #4:Who’s responsible for what?
    11. 11. What’s my server doing?Database negotiationsBusiness LogicURL managementUI/HTML renderingJSON rendering
    12. 12. What’s my client doing?Maintaining stateBusiness LogicURL managementUI/HTML rendering
    13. 13. What should the server be doing? Authority on request integrity Accessing/updating DB Serving data
    14. 14. What should the client be doing? Render UI Interactivity Logical requests to server UI state management (URL)
    15. 15. So how about this... Single UI App ‘packet’ upfront GET / POST API { json } Server only
    16. 16. We can do even better.... CDN Single UI ‘packet’ upfront GET / POST API { json } Server only
    17. 17. Server: now, HTML-ZEROThat’s kind of amazing for a web-app,and increasingly, the future
    18. 18. Demo time!http://app.boundless.com
    19. 19. Benefits:Fast first page-loads, lightning fast thereafterVery fast user-experienceClean separation of concerns between server/clientFront-end completely back-end agnosticAPI easily serves mobile, 3rd party, etc
    20. 20. Challenges:Increased front-end complexityIncreased build / deployment complexityModern browsers only (but thank god!)SEO complicated (a whole other presentation)
    21. 21. Challenge #1:Increased Front-End Complexity
    22. 22. Front-End ComplexityA TON of JavascriptA TON of CSSApp organization
    23. 23. Pro-tip #1: HAML
    24. 24. Pro-tip #2: SASS
    25. 25. Pro-tip #3: CoffeeScript
    26. 26. Pro-tip #4: MVC ...and plenty of others find the one that works for you:http://addyosmani.github.com/todomvc/
    27. 27. Challenge #2:Build / Deployment Complexity
    28. 28. CoffeScript CoffeScript JS PacketCoffeScript SASS CDN SASS CSS Packet SASS HTML / Image Assets (coordinate against API changes)
    29. 29. Introducing Spar*http://goboundless.github.com/spar *single page app rocketship
    30. 30. Spar was built to....Accelerate local single page app developmentSupport for Coffeescript, SASS, Haml, Less, etcHandle asset compilation & stitching1-command deploys to Heroku, S3, Cloudfront etcExtensible
    31. 31. Spar handles your front-endYou build your API anyway you like We happen to prefer Scala, Unfiltered and MongoDB
    32. 32. Getting Started$ gem install spar$ spar new myapp$ cd myapp$ spar server
    33. 33. Sample App$ git clone git@github.com:GoBoundless/spar-examples.git$ cd spar-examples/todos$ spar server
    34. 34. Thank you! @aaronwhiteand Team Boundless
    35. 35. Questions?we have answers!

    ×