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.

Transcript

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!