Intro to BackboneJS + Intermediate Javascript
1 like543 views
This document discusses Javascript applications and using frameworks like Backbone.js to bring sanity to projects. It covers how Backbone provides tools like Models, Collections, Views and Routers to help organize code. Templates are discussed as a way to separate HTML and Javascript. Local storage is presented as an option to persist data locally before integrating a database. The document emphasizes sketching and planning before coding to avoid building the wrong thing repeatedly. It recommends resources like Underscore.js and example code to learn Backbone best practices.
Intro to BackboneJS + Intermediate Javascript
- 1. Javascript applications and the quest for Sanity
- 2. Facts about Javascript Javascript was spawned and mutated (not born and nurtured) in the dank halls of Netscape tor.
- 3. Peace across the land
- 4. Modern Javascript is culture
- 5. The Good Parts Javascript is a flexible, loosley typed language. It can be and has been bent in many different ways. eg check out http://dailyjs.com/2012/11/26/js101-proto/
- 6. The Good Parts Javascript gives us ways to expand and manipulate it. Eg) Namespaces Single Global Variables Object Literals Nested namespaces
- 7. The Good Parts eg) Closures Passing information back and forth Returning Functions Reference instead of Create via http://stackoverflow.com/questions/111102/how-do-javascript-closures-work
- 8. The Bad Part Gets Messy Quickly Why? SCOPE and @#%*(@#$* Global Variables Not always consistent eg) Semicolon insertion
- 9. The Bad Part Really easy to let it get away from you.
- 10. Structures and Exploration http://forum.woodenboat.com/showthread.php?112363- Voronoi-Diagrams-in-Nature
- 11. You want to make a web app? Lets forget about the code for a minute. What are you trying to solve? Who is going to use your application? Where does your tool live? How much time do you have to make it? What does it actually do?
- 12. Sketch and Sketch and Sketch
- 14. List out what you need to do
- 15. Sketch a bit more
- 16. Let’s build something now...?
- 17. Model View Controller http://www.codinghorror.com/blog/2008/05/understanding-model-view-controller.html
- 20. BackboneJS
- 21. Intro to Backbone What is Backbone? Backbone is an awesome frameworks for organizing javascript projects. Set of tools that help you manage complexity. Set of methods and formalized conventions that are a given in modern Javascript Powerful way to approach building Single Page Applications
- 22. Backbone Building Blocks Model Collection View Router
- 23. Backbone Model Represents your data and what it’s supposed to do. The idea of the thing, not the thing. Holds defaults, holds checking functions.
- 24. Backbone Collection Collections hold groups of model data. Says how these models are stored and where they go when they die. Orders the data and lets you get informa- tion about it.
- 25. Backbone View Views are how the data and differ- ent parts of your application are represented. How do you render out your ToDo, or your portfolio piece? What are the different parts of your app? (This is why we sketch, by the way!)
- 26. Backbone Router Routers help you manage states. States are how your application know what’s what. Our different states: Standing Sitting Lying down Sleeping Dreaming How are those states represented?
- 27. And ‘lo, magic.
- 28. Framework to form Challenge is to translate the framework that Backbone gives us into the final applica- tion. Lets look at: Data Templates Behaviour
- 29. Data and your app Most modern applications require a database. Localstorage is an HTML5 spec that lets you keep and persist info all within the client side, i.e. the browser. But doesn’t let you share across. Backbone lets you drop in localstorage first, and worry about the DB later. eg) Meaning Clock started off as a localstorage app before I wrote the NodeJS server with a MongoDB database. This is why we make lists. They will help you decide what is best for you.
- 30. Backbone.sync Backbone.sync is a method to synchronize your collections and models across systems. So, how do I make this work with my server and data? var methodMap = { ’create’: ’POST’ , ’update’: ’PUT’ , ’delete’: ’DELETE’ , ’read’: ’GET’ }; Comes with a default way to manage data via the CRUD method. Great for Node or Ruby on Rails. Can be overridden if you want something custom.
- 31. Local vs. Remote storage
- 32. Templates Templates are how you separate HTML from JS. Make sense of the different KNOWN (again, sketching) states of your app. MyApp.js Index.jade
- 33. Underscore.js Framework for dealing with data. Powers a lot of the BackboneJS tools, and is hugely worth learning. Strong way to work with models and views.
- 34. That el thing The el element refers to a DOM element in the backbone.view Few different ways to deal with it. $el is an easy to use jquery object this.el is the standard Javascript DOM object. I often do this.$el.someJqueryFunction().anotherChainedjQueryFunction(); another option is this $(this.el).html(this.template); This reners the template defined in el: $(‘#inviteToEnter’) , template: _.template($(“#blankMeaning”).html()) to #inviteToEnter
- 35. Lets Look At Some Code My Own App, The Meaning Clock A much better programmed app, todoMVC Javascript
- 36. Things to remember Backbone is a FRAMEWORK, not a solution per se. It helps you organize your thinking and avoid getting overwhelmed if you use it right. Think and Sketch first, code later. It’s hugely valuable to do both, but drawing your app to scale on a piece of paper and pretending to interact with it is a hell of a lot more time effective than coding the wrong thing eight times. Use documentation and resources See the github repo for resources, http://github.com/readywater/backbonejs_workshop