Intro to-html-backbone-angular


Published on

html and backbone and angular crash course class.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Intro to-html-backbone-angular

  1. 1. Backbone and Angular JS Crash Course Zane Staggs - @zanedev Friday, January 31, 14
  2. 2. Welcome : Setup Coffee and food provided, caffeine up you’ll need it! WIFI: HD-Free Pass: hackerdojo Decent code editor: WebStorm (free trial): http:// Slides: Code: Google Chrome Browser: Friday, January 31, 14
  3. 3. Crash Course Structure Quick overview of web tech, really important everything builds on it later. Some may be review with such diverse backgrounds, skillsets and goals. Build a Library app together with jquery then backbone then angular. Try to keep up but no worries if not. 5-10 mins to try out some code after every session. Please don’t be afraid to ask questions we are all in this together. Our main goal is for you to walk out of here comfortable with web technologies, debugging, coding, and how to think like a web developer. Friday, January 31, 14
  4. 4. Your instructor Husband, Father and Developer Living the dream MIS graduate U of Arizona Coding House Friday, January 31, 14 BetterDoctor
  5. 5. Coding House Learn how to code with Intensive training courses Physical activities and food provided Full time immersion in coding environment Hands on mentorship and career placement Accessible to bart Night and Weekend classes coming soon! Friday, January 31, 14
  6. 6. So you want to be a web/ mobile developer? Coding languages: html/php/ruby/java/ javascript/c/python Design skills: user interface, photoshop, illustrator, optimizing graphics Business skills: communication, group/team dynamics Everything else: optimization, seo, sem, marketing, a/b testing, unit testing, bugs, debugging, operating systems, browser bugs/ quirks, devices, responsiveness, performance Friday, January 31, 14
  7. 7. Why would you want to do this? Wild West days of the internet Fun, creative Fame and Fortune Startups Friday, January 31, 14 Technology Career
  8. 8. It’s actually not that hard Today we will do a high level overview so you are at least familiar with the concepts that a web developer must deal with on a daily basis. It’s the bigger picture that matters when dealing with business people and engineers. I’m here to show you the how to get it done fast. It’s important to know how to think like a developer and use the resources that are available to you including google Friday, January 31, 14
  9. 9. The web browser Very complicated client software. Lots of differences between platforms (os) and rendering engines: gecko (firefox), webkit (safari/chrome) Reads markup, css, and js to combine to a web page IE is the underdog now, always a pain for web devs but getting better slowly Comparison_of_web_browsers Friday, January 31, 14
  10. 10. How the web works Client/Server (front vs back-end), networking, ip addresses, routers, ports, tcp/ip = stateless protocol Request/Response Life Cycle DNS (translates readable requests to map to servers) API’s (rest, xml, json, etc) Databases (mysql, mssql, mongodb) Markup languages (html, xml, xhtml) Doctypes Friday, January 31, 14
  11. 11. Client/Server Communications Client requests data from a server, server responds Cloud based/virtualization = many servers on one box sharing resources through software virtualization Friday, January 31, 14
  12. 12. DNS: Domain Name Servers Browser requests to look up a website address, hits the closest DNS server says yes I know where that is it’s at this IP address. IP addresses are like home addresses, domain names are like phone numbers they can be assigned to any home. Cacheing, propagation, TTL Friday, January 31, 14
  13. 13. Markup Languages HTML5 - modern html lots of new features, not even an official approved spec but browser vendors started implementing them anyway. W3C/standards Doctype tells the browser what spec to adhere to. DOM = Document Object Model: tree of elements in memory, accessible from javascript and the browser Friday, January 31, 14
  14. 14. Example DOM Tree Friday, January 31, 14
  15. 15. Server side Server software simply waits for requests. It responds with some data depending on the type of the request and what’s in it. Port 80 is reserved for website traffic so anything coming on that port is routed to the webserver on the machine like Apache, Nginx The server says: “oh this is a request for a rails page so let’s hand this off to rails let it do its thing then respond with the result”. Rails runs some logic based on the request variables, session values and checks the database if needed to look up more data and returns the response Friday, January 31, 14
  16. 16. Databases Like a big excel sheet, way to organize and retrieve data through columns and rows (schemas) Runs on the server responds to requests for data using specified syntax like SQL, JSON Example SQL: “select type from cars where color = blue” Mysql, MSSQL = traditional relational database MongoDB = schema-less, nosql database Friday, January 31, 14
  17. 17. APIs API = Application Programming Interface - good for decoupling your application. Data access. JSON = Preferred format for describing and transferring data, also native js object, nested attributes and values XML = brackets and tags, old school and heavier REST = (REpresentational State Transfer) - url scheme for getting and updating/creating data based on http requests HTTP Requests: GET, POST, UPDATE, DELETE Error codes: 200, 404, 500, etc Friday, January 31, 14
  18. 18. Quick Break and then Let’s get to coding HTML CSS Javascript Jquery, Backbone, Angular JS Friday, January 31, 14
  19. 19. HTML Descendant of xml so it relies on markup <p>text inside</p>, a few are “self closing” like <img /> Nesting Hierarchy: html, head, body - DOM Can have values inside the tag or as attributes like this: <p style=”....”>some value inside</p> Friday, January 31, 14
  20. 20. HTML5 Latest spec New html5 tags: article, section, header, footer, video, audio, local storage, input types, browser history, webrtc examples-of-html5-1233547 Friday, January 31, 14
  21. 21. CSS (Cascading Style Sheets) Style definitions for look and feel can be inline, in a separate file, or in the <head> of the document. Describe color, size, font style and some interaction now blurring the lines a bit Media queries = responsive = Paths can be relative (../) or absolute (/some/img.jpg) Positioning: Floating, centering. Box Model: padding and margins. Modern stuff in CSS3, table layout, flexbox, not supported yet everywhere. Friday, January 31, 14
  22. 22. CSS Box Model Friday, January 31, 14
  23. 23. You try it Change the body background color to green using an ID in the stylesheet. Change the available books button style to btn-info Change the title “Library of Books” to something different. Change all books to have a blue background color. Friday, January 31, 14
  24. 24. Javascript (not java!) Most ubiquitous language in the world, also can be inline, in the head, or in a seperate file. Similar to C syntax lots of brackets Variables vs Functions vs Objects {} Actually a lot of hidden features and very flexible Scope is important concept, window object, event bubbling/propagation Console, debugging with developer tools or firebug Polyfills for patching older browsers to give them support Friday, January 31, 14
  25. 25. General coding tips Use a good editor with code completion and syntax highlighting (webstorm or rubymine recommended) Close all tags first then fill it in. Use developer tools in chrome or firebug in firefox always. Get used to testing assumptions with the live console. Test at every change in all browsers if possible. Get a virtual box and free vm’s from ms: Phone testing: get a simulator, download xcode and android simulator Minimize the tags to only what you need. Semantics: stick to what the tags are for Friday, January 31, 14
  26. 26. Developer Tools Friday, January 31, 14
  27. 27. Jquery Javascript framework, used everywhere. Free and open source. Simplifies common tasks with javascript and the DOM $(‘.loginbutton’) = get this element or group of elements using a selector Vast selection of Plugins $.ready = when document (DOM) is completely loaded and ready to be used Friday, January 31, 14
  28. 28. Your turn Show the book buttons on mouseover (hover) - hint: start hidden with css (display:none) and show on mouseover using jquery Use the console in developer tools to checkout a book. Friday, January 31, 14
  29. 29. Backbone JS Front End Client Framework loosely based on MVC patterns. M = Model, V = View, C = Controller Model = Data/Business Logic View = Display/HTML Controller = Handles site operational logic, pull some data show a view (docs and annotated source) Requires underscore and jquery (or equivalent $ function) Friday, January 31, 14
  30. 30. Backbone Model Encapsulates an object’s data properties and storage/retrieval methods var myModel = Backbone.Model.extend({...}) myModel.on(“someEvent”, doSomething()) Listen to attribute changes and update view Getting/Setting properties: myModel.get(“myPropertyName”) myModel.set(“myPropertyName”, “someValue”) myModel.set(“myPropertyName”, {various:”properties”, ...}) myModel.toJSON() - convert to json string URL property - points to the url of the json data source sync/fetch/save - pull and save data from the server Friday, January 31, 14
  31. 31. Backbone Collection Ordered sets of Models - updating and retrieving models from a set easier. var Library = Backbone.Collection.extend({ model: Book }); A lot of the same methods as models Can sync them with data source just like models add - adds a model remove - removes a model Friday, January 31, 14
  32. 32. Backbone View Encapsulates a dom element on the page El property - dom element If you don’t use El, it creates a div unless you give the view “tagName” Rendering - use render() function Templates - reusable pieces of html Events - trigger and listen to events Friday, January 31, 14
  33. 33. Example Backbone View var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", events: { "click .icon": "open", "click .button.edit": "openEditDialog", "click .button.delete": "destroy" }, initialize: function() { this.listenTo(this.model, "change", this.render); }, render: function() { ... } Friday, January 31, 14
  34. 34. Backbone Events Events is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events _.extend(myObject, Backbone.Events); myObject.on(“someEvent”, function(msg){alert(“msg: ”+msg)}) myObject.trigger(“someEvent”, msg) Models, Views and Collections all extend from events so you have them already. Friday, January 31, 14
  35. 35. Backbone Router Manages urls and browser history for single page applications extend router then call Backbone.history.start() routes match url patterns: var Workspace = Backbone.Router.extend({ routes: { "help": "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, help: function() { ... }, search: function(query, page) { ... } }); Friday, January 31, 14
  36. 36. Front End Templating Assists with handling lots of markup and data manipulation. Built in to Underscore but Handlebars is a more robust templating solution: Include handlebars, then create an html template as a string or embedded in the html in a script tag with {{curly braces}} for the data. var myTemplate = “<div>{{one}}</div>”; Create a js data object like var data = {“one”:”1”, “two”:”2”}; Compile the template using handlebars like: var template = Handlebars.compile(myTemplate); Get the resulting html by executing the compiled template passing in the data: var result = template(context); Output the result of that into the html using $.html(result) Friday, January 31, 14
  37. 37. Let’s try it Add a new backbone view for the title area and change the title to “My Library Of Books” on click. - hint: use the events on the view and the $ selector Log all the available books to the developer tools console after checking one out. Sort the books on load. Change the book li’s to use a handlebars template instead of hard coded html. Friday, January 31, 14
  38. 38. Backbone Resources,blog-posts-and-example-sites Friday, January 31, 14
  39. 39. Angular JS “Superheroic” Framework. Declarative = higher level and easier to understand. What HTML would have been had it been designed for web apps HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. Friday, January 31, 14
  40. 40. Angular JS Features Data Binding: Models and views in sync both ways Directives: Attribute that allows angular to hook into dom element and create custom elements. Filters: Handy built in functions to transform or parse some data (sort, find, format). Can build your own custom ones also. Dependency Injection: Import whats needed on the fly Modules and Controllers: Module encapsulates an app, controllers encapsulate a dom view. Routes: Match displaying views and urls Animations: Built in way to handle transition animations Testing: Built in support for testing Friday, January 31, 14
  41. 41. Two Way Data Binding View is automatically in sync with the model Friday, January 31, 14
  42. 42. Directives At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children. Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngView. Much like you create controllers and services, you can create your own custom directives for Angular to use. myModule.directive('myComponent', function(mySharedService) {... <my-component ng-model="message"></my-component> Can restrict the directive to a certain type of element or class. Friday, January 31, 14
  43. 43. Filters A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter. Filters can be applied to expressions in view templates using the following syntax: {{ expression | filter }} E.g. the markup {{ 12 | currency }} formats the number 12 as a currency using the currency filter. The resulting value is $12.00. Filters can be applied to the result of another filter. This is called "chaining" and uses the following syntax: {{ expression | filter1 | filter2 | ... }} Filters may have arguments. The syntax for this is {{ expression | filter:argument1:argument2:... }} E.g. the markup {{ 1234 | number:2 }} formats the number 1234 with 2 decimal points using the number filter. The resulting value is 1,234.00. Friday, January 31, 14
  44. 44. Dependency Injection Dependency Injection (DI) is a software design pattern that deals with how code gets hold of its dependencies. AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test. To gain access to core AngularJS services, it is simply a matter of adding that service as a parameter; AngularJS will detect that you need that service and provide an instance for you. function EditCtrl($scope, $location, $routeParams) { // Something clever here... } Friday, January 31, 14
  45. 45. Modules and Controllers In general, a Controller shouldn't try to do too much. It should contain only the business logic needed for a single view. The most common way to keep Controllers slim is by encapsulating work that doesn't belong to controllers into services and then using these services in Controllers via dependency injection. Do not use Controllers for: Any kind of DOM manipulation — Controllers should contain only business logic. DOM manipulation (the presentation logic of an application) is well known for being hard to test. Putting any presentation logic into Controllers significantly affects testability of the business logic. Angular offers databinding for automatic DOM manipulation. If you have to perform your own manual DOM manipulation, encapsulate the presentation logic in directives. Input formatting — Use angular form controls instead. Output filtering — Use angular filters instead. Sharing stateless or stateful code across Controllers — Use angular services instead. Managing the life-cycle of other components (for example, to create service instances). Friday, January 31, 14
  46. 46. Routes Match urls to display views (ng-view) and template files Need to import the separate routes js file: <script src="lib/angular/angular-route.js"></script> Then defined the routes Friday, January 31, 14
  47. 47. Animations Based on CSS Adds the proper class names before and after Must include angular-animate.min.js animations Friday, January 31, 14
  48. 48. Testing Built in support for testing, no excuse for not using it. Testing is very important in a js project Requires a server to run, Node JS is usual suspect Friday, January 31, 14
  49. 49. Give it a shot Fix the problem with the added books breaking checkout/return methods. Friday, January 31, 14
  50. 50. Angular Links Friday, January 31, 14
  51. 51. Modern front end web development HAML and SASS, Compass, Less, Static site generators: middleman, jekyll Coffeescript (simpler syntax for javascript) Grunt and Yeoman (build and dependency management) Node JS (back end - server side javascript) Friday, January 31, 14
  52. 52. Mobile web development HTML5 vs Native vs Hybrid PhoneGap Appgyver - fast way to get an app on the phone and development Objective C/xcode - Native Iphone Android: Java Friday, January 31, 14
  53. 53. Key Takeaways Don’t give up the more you see it the more it will sink in Jquery is great for plugins and simple dom based tasks, allows for $ selector but can get messy in a larger application. Backbone JS provides the building blocks for a nicely seperated app but requires more work wiring up views and models manually. Angular is very fast to develop with and provides most of the features of jquery and backbone plus handy utilities to lessen the amount of boilerplate code required. Friday, January 31, 14
  54. 54. Questions Have any questions speak up! Friday, January 31, 14