Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Figuring Out Front-End Driven Apps

Figuring Out Front-End Driven Apps

As front-end developers, we have an incredible opportunity to create awesome experiences with tools Firebase and Hoodie. I wanted to show just how much we can do without any knowledge of the server-side code using a Backend as a Service.

I created a simple CRUD app with realtime data syncing and user authentication using Firebase and then the same app with Hoodie. You can check out all the code on my GitHub, https://github.com/HipsterBrown/FDA-demos, and see how simple it really is. Both apps took me roughly two days to get all that functionality.

I'm available on Twitter, @hipsterbrown, or via a pull request on the repo for any questions or discussion.


April 30, 2014

More Decks by HipsterBrown

Other Decks in Programming


  1. Figuring Out Front-End Driven Apps A Guide to Making Awesome

    Web Apps as a Front-End Dev
  2. Who Am I? • Nick Hehr, a.k.a HipsterBrown • Product

    Designer & Front-End Developer • Idea Fanatic • Workflow Nut • App n00b • Forever Learner
  3. What are FDAs?

  4. noBackend

  5. Static Web Apps

  6. – StaticApps.org “[FDAs] run independently of the need for server-side

    dynamic processing. Static web architecture eases common web development headaches without introducing additional complexity.”
  7. Traits of an FDA • Servers gives over all static

    pages at once, very similar to a JavaScript SPA • All templating and content generated on the front- end with JavaScript connected to data services • May use some form of Backend as a Service, BaaS, like Firebase, Parse, or Hoodie
  8. Why are they awesome?

  9. No need for “custom” backend

  10. No need for “custom” backend • How many times is

    the backend actually custom from every other backend out there? • Needs user signup/login - not custom • Needs data store - not custom • Needs chat functionality - not custom • Needs email support - not custom
  11. Easier local development

  12. Easier local development • No debate over which backend language

    to use • No need to install a local database to sync with production db later • Use static files and create servers with local workflow tools like Grunt/Gulp/Brunch/Broccoli
  13. Rapid Prototyping

  14. Rapid Prototyping • Create awesome, polished UIs with CSS/SCSS/Less frameworks

    like Foundation or Bootstrap • Organize your code and get functionality working right away with JS frameworks like Ember, Angular, or Backbone. • Host anywhere that serves static files, a.k.a everywhere.
  15. Separation of Concerns

  16. Separation of Concerns • The FDA is just one interface

    for your users to interact with. • The decouple BaaS and other external data services can be served to other mediums. • Create mobile or desktop apps from the same data
  17. How to get started with FDAs

  18. Learn about APIs

  19. Commercial BaaS

  20. Commercial BaaS

  21. Open Source BaaS

  22. Commercial vs Open Source • More mature • Super slick

    admin interface • Plugins for popular frameworks • Tools for easy login with third- party services • FREE!! • Opportunity to shape the future of the product • Create your own plugins for others • Start using it before it’s cool
  23. Why Firebase? • Great quick start guides and docs •

    Focus on syncing and usability • Tools for easy integration with JS frameworks like Ember, Angular, & Backbone • Not owned by Facebook…
  24. Why Hoodie? • Focus on the future of the web,

    i.e. Offline-First and easy syncing • Uses localStorage, CouchDB, and Node.js for super face, “realtime” apps • Great command line tool for local development • Easy AppKit-type Getting Started app • Super cool team working on it
  25. Live Coding!