BackboneJS

CoffeeScript

Transcript

1. BACKBONE.JS & coffeescript Monday, 13 February, 12
2. BACKBONE.JS & coffeescript Coffeescript is a language which compiles to Javascript (Like C++ used to compile to C) Backbone.JS is only one Javascript file at 1,200 lines of code It uses another library called Underscore.JS which has Ruby like operations eg, map, reduce. _.sortBy([1, 2, 3, 4, 5, 6], function(num){ return Math.sin(num); }); => [5, 4, 6, 3, 1, 2] The purpose of Backbone to allow a webpage to act like the Gmail client page, it does not need to refresh the entire browser to go to different parts of the application. Monday, 13 February, 12
3. MVC BackBone JS is a Model View Controller framework Its a small “lightweight” one C M V Monday, 13 February, 12
4. BACKBONE.JS & coffeescript Backbone.JS covers the following topics: - Router: going from page to page. - Event binding: events that trigger and call methods such as when something changes. You can create your own event classes and call events on anything. - Models and Collections: Store data. Can contain business logic prior to persisting or updating. - Controller: is just a router, normally not containing much code. - View: Contains code which binds models and collections to the screen. Monday, 13 February, 12
5. BACKBONE.JS & coffeescript It is worthwhile to read the 1,200 lines of code that make up Backbone.js to understand what is going on. There are a lot of online tutorials BUT they all do things in different ways. Monday, 13 February, 12
6. BACKBONE.JS & coffeescript When you use Gmail notice when you click on the inbox. The Top URL is: https://mail.google.com/mail/?shva=1#inbox When I clicked on a email the Top URL is: https://mail.google.com/mail/?shva=1#sent/13557e8da95957b5 If I click on Starred, the Top URL is: https://mail.google.com/mail/?shva=1#starred What changed? The webpage didn’t refresh the page, it fetched the content by “ajax” and kept track of the route by the # (hash/pound) symbol. The tracking by #... is called the Route Monday, 13 February, 12
7. MVC Normal MVC Model contains data with get and set attributes View only displays data on the screen such as forms or tables of data Controller does all the work fetching data from the database CRUD (Create, Read, Update, Delete) Pushing data to the view and saving it to the model C M V Monday, 13 February, 12
8. BACKBONE IS !=MVC IS=MVR View is the controller Controller is called “Router” Models and Collections R M & C V Monday, 13 February, 12
9. MODEL AND COLLECTIONS Backbone.JS uses Models and Collections for data storage. R M & C V Models and Collections usually store data which was or is stored on the server, or could be just stored in the client browser. Collections can be joined with views to display data in a list, this is mostly why collections are useful. Collections can also be “bound” to client or server data stores, allowing them to be synchronized when you Create, Read, Update, Delete the collection. Monday, 13 February, 12
10. MODEL AND COLLECTIONS Backbone.JS uses Models and Collections for data storage. R M & C V Collections can also be “bound” to client or server data stores, allowing them to be synchronized when you Create, Read, Update, Delete the collection. Monday, 13 February, 12
11. MODEL AND COLLECTIONS Backbone.JS uses Models and Collections for data storage. View Collection in a view Monday, 13 February, 12
12. MODEL AND COLLECTIONS Backbone.JS uses Models and Collections for data storage. R M & C V Models. Models are classes which allow data to be stored. You can place business logic in the models, such as before save. Monday, 13 February, 12
13. COFFEESCRIPT Getting started I cannot teach Coffeescript in one presentation. So I cover the following: A. Easy ways to program in it B. Some problems I encountered C. Learning resources, books, videos, etc Monday, 13 February, 12
14. To get started easily, use the JS to Coffeescript converter at: http://js2coffee.org/ BUT be careful, this code is wrong: Monday, 13 February, 12
15. COFFEESCRIPT Getting started What does a class look like in Coffeescript? render is a method on the class. indentation (2 spaces) is important, indentation is like { } @ means (this.) Monday, 13 February, 12
16. COFFEESCRIPT What is difficult? Coffeescript is like Javascript but has many “secrets” -> and => have two different meanings. -> means execute in the scope of the caller => means execute in the scope of the object instance If someone clicks on a button then calls a method on a object instance of this class, then testVariable is not in scope because of -> class TEST testVariable = 0 testMethod: -> alert(testVariable) fails Monday, 13 February, 12
17. COFFEESCRIPT What is difficult? Coffeescript is like Javascript but has many “secrets” $(“#password”).keypress (e) => alert('hi') DOES NOT WORK! $('#password').keypress (e) => alert('hi') WORKS! Note the ‘ and “ difference. word = "Hello" greeting = "#{word} World!" alert(greeting) --- produces Hello World! Monday, 13 February, 12
18. COFFEESCRIPT Learning Learning Coffeescript Video http://screencasts.org/episodes/introduction-to- coffeescript Google search of course. Or buy a book (online). Maybe 3 days reading to get 80% of it. Monday, 13 February, 12
19. BACKBONE.JS & coffeescript Why events? It has events, this allows a function to be bound to a model or collection, so if the model (or collection) changes, some function can get called. This allows asynchronous events to occur and for code to BIND to events at any time. Monday, 13 February, 12
20. BACKBONE.JS & coffeescript Why models and collections? Can get and set values on a model. When a model value is set, a validation event can be triggered which calls a validation function. When a collection is changed, the UI should update automatically! Monday, 13 February, 12
21. BACKBONE.JS & coffeescript Why views? The view is a Javascript Class which acts as a view, the purpose is to display information to the user and to interact with the user. Views can be nested within views, so its good to have many small views for parts of the screen. Monday, 13 February, 12
22. BACKBONE.JS & coffeescript My opinions Coffeescript is good, not so difficult to learn. I don’t see anything bad about it. Backbone is good and bad: A. Does not force any way to use it, different to Ruby on Rails which suggests normally a way to use it. This is bad because its hard to get started without knowing the “right” way to use it. Why is Ruby on Rails easy? As there is a right way and easy way to use it. This is good as it gives flexibility, someone with a lot of experience in Backbone would be very good at making a dynamic client UI. But a small amount of experience is not good. Monday, 13 February, 12
23. BACKBONE.JS & coffeescript My opinions continued... B. Backbone is a minimal library without many features, many people write libraries around it to perform functions. https://github.com/powmedia/backbone-forms BackBone forms makes form binding and validation easier. https://github.com/n-time/backbone.validations Makes form validation easier. Many extensions here, google search backbone js extensions: https://github.com/documentcloud/backbone/wiki/Extensions,- Plugins,-Resources Monday, 13 February, 12
24. BACKBONE.JS & coffeescript My opinions continued... C. It acts as glue between libraries on the UI. That is, it allows javascript libraries from many developers and UI (JQuery) to be glued together, this gives a lot of freedom in controlling and developing the UI. Also freedom to choose form many libraries. D. I don’t like separation of client and server code bases. Liftweb in Scala can keep most Javascript code generated from the server side so most code resides on the server side. E. No books yet, well no published books - lots of other resources. Monday, 13 February, 12
25. CONCLUSION What games I like Ladybug Bolderdash Puzzles and strategy Monday, 13 February, 12
26. CONCLUSION What games I like Super bomberman, pacman etc Strategy: Warcraft 3 Puzzles and strategy Monday, 13 February, 12
27. END Monday, 13 February, 12