HTML5 and Backbone
JS Crash Course
Zane Staggs - CodingHouse.co
Your instructor
Husband, Father and Developer
Living the dream...
MIS graduate U of Arizona

Coding House BetterDoctor
Coding House
Learn how to code 60 days of Intensive training
Physical activities and food provided
Full time immersion in ...
So you want to be a
web/ mobile developer?
Coding languages:
html/php/ruby/java/javascript/c
Design skills: user interface...
Why would you want to
do this? West days of the internet
Wild
Fun, creative
Fame and Fortune
Startups

Technology

Career
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
w...
The web browser
Very complicated client software.
Lots of differences between
platforms (os) and rendering
engines: gecko ...
How the web works

Client/Server (front vs back end), networking, ip
addresses, routers, ports, tcp/ip = stateless
protoco...
Client/Server
Client requests data from a server, server
Communications
responds

Cloud based/virtualization = many server...
DNS requests
Browser requests to look up a website
address, hits the closest DNS server says yes I
know where that is it’s...
APIs

API = Application Programming Interface - good
for decoupling your application. Data access.
JSON = Preferred format...
Databases
Like a big excel sheet, way to organize and
retrieve data through columns and rows
(schemas)
Runs on the server ...
Markup Languages
HTML5 - modern html lots of new features, not
even an official approved spec but browser
vendors started ...
Example Dom Tree
Let’s create a website
HTML
CSS
Javascript
General Programming Concepts
HTML
Descendant of xml so it relies on markup
<p>text inside</p>, a few are “self closing” like
<img />
Nesting Hierarchy:...
HTML5
Latest spec
New html5 tags: article, section, header, footer,
video, audio, local storage, input types, browser
hist...
CSS (Cascading Style
Sheets) for look and feel can be inline, in
Style definitions
a separate file, or in the <head> of th...
Javascript
(not java)
Most ubiquitous language, also can be inline, in the head,
or in a seperate file.
Similar to C synta...
General coding tips syntax
Good editor with code completion and
highlighting (webstorm or rubymine
recommended)
Close all ...
Jquery
Javascript framework, used everywhere. Free
and open source.
Simplifies common tasks with javascript and the
DOM
$ ...
Bootstrap
CSS and JS Framework from Twitter for rapid
development of User Interfaces (Prototyping)
Include the CSS file an...
Modern front end web
development
HAML and SASS, Compass, Less,
Static site generators: middleman, jekyll
Coffeescript (sim...
Server side
Server sits and wait for requests. It responds with
some data depending on the type of the request
and what’s ...
Basic Server Admin
Windows vs Linux
Terminal basics: cp, rm, cd, whoami, pwd
Services need to be running and healthy like
...
Version Control
Git/Github - distributed version control
SVN/CVS - older non distributed
Branching
Merging diffs
Pushing t...
Backbone JS

Front End Framework loosely based on MVC
M = Model, V = View, C = Controller
Model = Data/Business Logic
View...
Backbone Model
Ecapsulates an object’s data properties
and storage/retrieval methods
var myModel = Backbone.Model.extend({...
Backbone Collection
Ordered sets of Models - updating and
retrieving models from a set easier.
var Library = Backbone.Coll...
Backbone View
Encapsulates a dom element on the
page
El property - dom element

If you don’t use El, it creates a div
unle...
Example Backbone
View
var DocumentRow = Backbone.View.extend({ tagName: "li", className:
"document-row", events: { "click ...
Backbone Events
Events is a module that can be mixed in to any object, giving the object the
ability to bind and trigger c...
Backbone Router
Manages urls and browser history
extend router then call Backbone.history.start()

extend router then call...
Backbone Resources
http://arturadib.com/hello-backbonejs

http://tutorialzine.com/2013/04/services-chooser-b
http://ricost...
Mobile web
development
HTML5 vs Native vs Hybrid
PhoneGap
Appgyver - fast way to get an app on the
phone and development
O...
Key Takeaways
Don’t give up the more you see it the more it
will sink in
Do free/cheap work until you get good
Pay attenti...
Questions

Have any questions speak up!
Upcoming SlideShare
Loading in...5
×

Intro to-html-backbone

1,565

Published on

Intro to HTML5 and Backbone JS

Published in: Technology, Design
1 Comment
0 Likes
Statistics
Notes
  • Hey everybody follow me @zanedev for carefully curated web dev links.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,565
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Intro to-html-backbone

  1. 1. HTML5 and Backbone JS Crash Course Zane Staggs - CodingHouse.co
  2. 2. Your instructor Husband, Father and Developer Living the dream... MIS graduate U of Arizona Coding House BetterDoctor
  3. 3. Coding House Learn how to code 60 days of Intensive training Physical activities and food provided Full time immersion in coding environment Hands on mentorship and career placement Accessible to bart First class in January
  4. 4. So you want to be a web/ mobile developer? Coding languages: html/php/ruby/java/javascript/c 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, speed,
  5. 5. Why would you want to do this? West days of the internet Wild Fun, creative Fame and Fortune Startups Technology Career
  6. 6. 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
  7. 7. 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 http://en.wikipedia.org/wiki/Comparison_of_web_bro
  8. 8. 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
  9. 9. Client/Server Client requests data from a server, server Communications responds Cloud based/virtualization = many servers on one box sharing resources through software virtualization
  10. 10. DNS requests 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. Cacheing, propagation, TTL
  11. 11. 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
  12. 12. 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
  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
  14. 14. Example Dom Tree
  15. 15. Let’s create a website HTML CSS Javascript General Programming Concepts
  16. 16. 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> http://www.w3schools.com/html/html_quick.asp
  17. 17. HTML5 Latest spec New html5 tags: article, section, header, footer, video, audio, local storage, input types, browser history, webrtc http://www.creativebloq.com/web-design-tips/exam http://www.html5rocks.com/en/
  18. 18. CSS (Cascading Style Sheets) for look and feel can be inline, in Style definitions 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 Floating, scrolling, and centering. Modern stuff, table layout, flexbox, not supported yet everywhere
  19. 19. Javascript (not java) Most ubiquitous language, 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 propagation Console, debugging with developer tools or firebug Polyfills for patching older browsers to give them support
  20. 20. General coding tips syntax Good editor with code completion and highlighting (webstorm or rubymine recommended) Close all tags first then fill it in. Test at every change in all browsers if possible. Get a virtual box and free vm’s from ms: modern.ie Get a simulator, download xcode and android simulator Minimize the tags to only what you need. Semantics: stick to what the tags are for
  21. 21. Jquery Javascript framework, used everywhere. Free and open source. Simplifies common tasks with javascript and the DOM $ = 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
  22. 22. Bootstrap CSS and JS Framework from Twitter for rapid development of User Interfaces (Prototyping) Include the CSS file and js file Use the various components as needed. Override styles as necessary http://getbootstrap.com/ Available themes: wrapbootstrap.com (paid), bootswatch.com (free)
  23. 23. Modern front end web development HAML and SASS, Compass, Less, Static site generators: middleman, jekyll Coffeescript (simpler syntax for javascript) Grunt and Yeoman (build anddependency management) Node JS (back end or server side javascript) MVC frameworks: backbone js, angular js http://updates.html5rocks.com/2013/11/The-Landsca
  24. 24. Server side Server sits and wait 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. 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
  25. 25. Basic Server Admin Windows vs Linux Terminal basics: cp, rm, cd, whoami, pwd Services need to be running and healthy like mail, bind (dns), os level stuff disk space etc Security Backups http://community.linuxmint.com/tutorial/view/100
  26. 26. Version Control Git/Github - distributed version control SVN/CVS - older non distributed Branching Merging diffs Pushing to master https://www.atlassian.com/git/workflows
  27. 27. Backbone JS Front End Framework loosely based on MVC M = Model, V = View, C = Controller Model = Data/Business Logic View = Display/HTML Controller = Handles site operational logic, pull some data show a view http://backbonejs.org/ (docs and annotated source) Requires underscore and jquery or equivalent $ function
  28. 28. Backbone Model Ecapsulates 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
  29. 29. 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
  30. 30. 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
  31. 31. 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() { ... }});
  32. 32. 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.
  33. 33. Backbone Router Manages urls and browser history extend router then call Backbone.history.start() 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) { ... }});
  34. 34. Backbone Resources http://arturadib.com/hello-backbonejs http://tutorialzine.com/2013/04/services-chooser-b http://ricostacruz.com/backbone-patterns http://backbonetutorials.com https://github.com/jashkenas/backbone/wiki/T utorials,-blog-posts-and-example-sites
  35. 35. 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
  36. 36. Key Takeaways Don’t give up the more you see it the more it will sink in Do free/cheap work until you get good Pay attention to the minor details User experience is paramount Always do what it takes to meet goals while managing the tradeoffs and complete as fast as possible Stay on top of new tech
  37. 37. Questions Have any questions speak up!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×