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.

HipsterBrown

April 30, 2014
Tweet

More Decks by HipsterBrown

Other Decks in Programming

Transcript

  1. Figuring Out Front-End Driven Apps
    A Guide to Making Awesome Web Apps as a Front-End Dev

    View full-size slide

  2. Who Am I?
    • Nick Hehr, a.k.a HipsterBrown
    • Product Designer & Front-End Developer
    • Idea Fanatic
    • Workflow Nut
    • App n00b
    • Forever Learner

    View full-size slide

  3. What are FDAs?

    View full-size slide

  4. Static Web Apps

    View full-size slide

  5. – 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.”

    View full-size slide

  6. 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

    View full-size slide

  7. Why are they awesome?

    View full-size slide

  8. No need for “custom” backend

    View full-size slide

  9. 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

    View full-size slide

  10. Easier local development

    View full-size slide

  11. 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

    View full-size slide

  12. Rapid Prototyping

    View full-size slide

  13. 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.

    View full-size slide

  14. Separation of Concerns

    View full-size slide

  15. 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

    View full-size slide

  16. How to get started with FDAs

    View full-size slide

  17. Learn about APIs

    View full-size slide

  18. Commercial BaaS

    View full-size slide

  19. Commercial BaaS

    View full-size slide

  20. Open Source BaaS

    View full-size slide

  21. 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

    View full-size slide

  22. 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…

    View full-size slide

  23. 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

    View full-size slide

  24. Live Coding!

    View full-size slide