• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ultra-modern Front-end Dev & Introducing Spar
 

Ultra-modern Front-end Dev & Introducing Spar

on

  • 1,384 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, ...

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

Statistics

Views

Total Views
1,384
Views on SlideShare
1,384
Embed Views
0

Actions

Likes
5
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Ultra-modern Front-end Dev & Introducing Spar Presentation Transcript

  • Ultra-ModernFront EndArchitectures @aaronwhite Boundless CTO, Co-founder http://github.com/GoBoundless
  • In the beginning Sir Tim Berners Lee said... GET CERN HTTPdWorldWideWeb 200 OK HTML ...and it was OK
  • but then Brendan Eich went all... GET Server 200 OK HTML
  • but then Brendan Eich went all... GET Server 200 OK HTML
  • but then Brendan Eich went all... GET Server 200 OK HTML ...and sh*t got real
  • real complicated
  • Problem #1:Redundant HTML rendering (Server-code & JS)
  • Problem #2: Duplicated Logic(Server-code & JS)
  • Problem #3:Coordinating URL Space(Across Server & Client)
  • Problem #4:Who’s responsible for what?
  • What’s my server doing?Database negotiationsBusiness LogicURL managementUI/HTML renderingJSON rendering
  • What’s my client doing?Maintaining stateBusiness LogicURL managementUI/HTML rendering
  • What should the server be doing? Authority on request integrity Accessing/updating DB Serving data
  • What should the client be doing? Render UI Interactivity Logical requests to server UI state management (URL)
  • So how about this... Single UI App ‘packet’ upfront GET / POST API { json } Server only
  • We can do even better.... CDN Single UI ‘packet’ upfront GET / POST API { json } Server only
  • Server: now, HTML-ZEROThat’s kind of amazing for a web-app,and increasingly, the future
  • Demo time!http://app.boundless.com
  • 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
  • Challenges:Increased front-end complexityIncreased build / deployment complexityModern browsers only (but thank god!)SEO complicated (a whole other presentation)
  • Challenge #1:Increased Front-End Complexity
  • Front-End ComplexityA TON of JavascriptA TON of CSSApp organization
  • Pro-tip #1: HAML
  • Pro-tip #2: SASS
  • Pro-tip #3: CoffeeScript
  • Pro-tip #4: MVC ...and plenty of others find the one that works for you:http://addyosmani.github.com/todomvc/
  • Challenge #2:Build / Deployment Complexity
  • CoffeScript CoffeScript JS PacketCoffeScript SASS CDN SASS CSS Packet SASS HTML / Image Assets (coordinate against API changes)
  • Introducing Spar*http://goboundless.github.com/spar *single page app rocketship
  • 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
  • Spar handles your front-endYou build your API anyway you like We happen to prefer Scala, Unfiltered and MongoDB
  • Getting Started$ gem install spar$ spar new myapp$ cd myapp$ spar server
  • Sample App$ git clone git@github.com:GoBoundless/spar-examples.git$ cd spar-examples/todos$ spar server
  • Thank you! @aaronwhiteand Team Boundless
  • Questions?we have answers!