HTML5 and Backbone JS HTML5 and Backbone JS Crash CourseCrash CourseZane Staggs - CodingHouse.coZane Staggs - CodingHouse.co

Your instructorYour instructor

Husband, Father and DeveloperHusband, Father and Developer

Living the dream...Living the dream...

Coding HouseCoding House

MIS graduate U of ArizonaMIS graduate U of Arizona

BetterDoctorBetterDoctor

Coding HouseCoding House

Learn how to code 60 days of Intensive trainingLearn how to code 60 days of Intensive training

Physical activities and food providedPhysical activities and food provided

Full time immersion in coding environmentFull time immersion in coding environment

Hands on mentorship and career placementHands on mentorship and career placement

Accessible to bartAccessible to bart

First class in JanuaryFirst class in January

So you want to be a So you want to be a web/ mobile developer?web/ mobile developer?

Coding languagesCoding languages: : html/php/ruby/java/javascript/chtml/php/ruby/java/javascript/c

Design skillsDesign skills: user interface, photoshop, : user interface, photoshop, illustrator, optimizing graphicsillustrator, optimizing graphics

Business skillsBusiness skills: communication, : communication, group/team dynamics, group/team dynamics,

Everything elseEverything else: optimization, seo, sem, : optimization, seo, sem, marketing, a/b testing, unit testing, bugs, marketing, a/b testing, unit testing, bugs, debugging, operating systems, browser debugging, operating systems, browser bugs/quirks, devices, responsiveness, bugs/quirks, devices, responsiveness, speed, speed,

Why would you want to Why would you want to do this?do this?

CareerCareer

Fame and FortuneFame and Fortune

Fun, creativeFun, creative

Wild West days of the internetWild West days of the internet

TechnologyTechnology

StartupsStartups

It’s actually not that It’s actually not that hard hard

Today we will do a Today we will do a high level overviewhigh level overview so you so you are at least familiar with the concepts that a web are at least familiar with the concepts that a web developer must deal with on a daily basis.developer must deal with on a daily basis.

It’s the It’s the bigger picture that mattersbigger picture that matters when when dealing with business people and engineers.dealing with business people and engineers.

I’m here to show you the I’m here to show you the how to get it done fasthow to get it done fast..

It’s important to know how to think like a It’s important to know how to think like a developer and use the resources that are developer and use the resources that are available to you including googleavailable to you including google

The web browserThe web browserVery complicated client software.Very complicated client software.

Lots of differences between Lots of differences between platforms (os) and rendering platforms (os) and rendering engines: gecko (firefox), webkit engines: gecko (firefox), webkit (safari/chrome)(safari/chrome)

Reads markup, css, and js to Reads markup, css, and js to combine to a web pagecombine to a web page

IE is the underdog now, always a IE is the underdog now, always a pain for web devs but getting pain for web devs but getting better slowlybetter slowly

http://en.wikipedia.org/wiki/Comphttp://en.wikipedia.org/wiki/Comparison_of_web_browsersarison_of_web_browsers

How the web worksHow the web worksClient/Server (front vs back end), networking, ip Client/Server (front vs back end), networking, ip addresses, routers, ports, tcp/ip = stateless protocoladdresses, routers, ports, tcp/ip = stateless protocol

Request/Response Life CycleRequest/Response Life Cycle

DNS (translates readable requests to map to DNS (translates readable requests to map to servers)servers)

API’s (rest, xml, json, etc)API’s (rest, xml, json, etc)

Databases (mysql, mssql, mongodb)Databases (mysql, mssql, mongodb)

Markup languages (html, xml, xhtml) DoctypesMarkup languages (html, xml, xhtml) Doctypes

Client/Server Client/Server CommunicationsCommunications

Client requests data from a server, server respondsClient requests data from a server, server responds

Cloud based/virtualization = many servers on one Cloud based/virtualization = many servers on one box sharing resources through software box sharing resources through software virtualizationvirtualization

DNS requestsDNS requestsBrowser requests to look up a website address, Browser requests to look up a website address, hits the closest hits the closest DNS serverDNS server says yes I know says yes I know where that is it’s at this where that is it’s at this IP addressIP address..

Cacheing, propagation,Cacheing, propagation,TTLTTL

APIsAPIsAPIAPI = Application Programming Interface - good = Application Programming Interface - good for decoupling your application. Data access.for decoupling your application. Data access.

JSON JSON = Preferred format for describing and = Preferred format for describing and transferring data, also native js object, nested transferring data, also native js object, nested attributes and valuesattributes and values

XMLXML = brackets and tags, old school and heavier = brackets and tags, old school and heavier

RESTREST = (REpresentational State Transfer) - url = (REpresentational State Transfer) - url scheme for getting and updating/creating data scheme for getting and updating/creating data based on http requestsbased on http requests

HTTP RequestsHTTP Requests: GET, POST, UPDATE, DELETE: GET, POST, UPDATE, DELETE

Error codesError codes: 200, 404, 500, etc: 200, 404, 500, etc

DatabasesDatabases

Like a big excel sheet, way to organize and Like a big excel sheet, way to organize and retrieve data through columns and rows retrieve data through columns and rows (schemas)(schemas)

Runs on the server responds to requests for data Runs on the server responds to requests for data using specified syntax like SQL, JSONusing specified syntax like SQL, JSON

Example SQL: “select type from cars where color Example SQL: “select type from cars where color = blue”= blue”

Mysql, MSSQL = traditional relational databaseMysql, MSSQL = traditional relational database

MongoDB = schema-less, nosql databaseMongoDB = schema-less, nosql database

Markup LanguagesMarkup LanguagesHTML5 - modern html lots of new features, not HTML5 - modern html lots of new features, not even an official approved spec but browser even an official approved spec but browser vendors started implementing them anyway.vendors started implementing them anyway.

W3C/standardsW3C/standards

Doctype tells the browser what spec to adhere Doctype tells the browser what spec to adhere to.to.

DOM = Document Object Model: tree of DOM = Document Object Model: tree of elements in memory, accessible from javascript elements in memory, accessible from javascript and the browserand the browser

Example Dom TreeExample Dom Tree

Let’s create a websiteLet’s create a website

HTMLHTML

CSSCSS

Javascript Javascript

General Programming ConceptsGeneral Programming Concepts

HTMLHTMLDescendant of xml so it relies on markup Descendant of xml so it relies on markup

<p>text inside</p>, a few are “self closing” <p>text inside</p>, a few are “self closing” like <img />like <img />

Nesting HierarchyNesting Hierarchy: html, head, body - DOM : html, head, body - DOM

Can have values inside the tag or as attributes Can have values inside the tag or as attributes like this: <p style=”....”>some value like this: <p style=”....”>some value inside</p>inside</p>

http://www.w3schools.com/html/html_quick.asphttp://www.w3schools.com/html/html_quick.asp

HTML5HTML5

Latest specLatest spec

New html5 tags: article, section, header, New html5 tags: article, section, header, footer, video, audio, local storage, input types, footer, video, audio, local storage, input types, browser history, webrtcbrowser history, webrtc

http://www.creativebloq.com/web-design-tips/ehttp://www.creativebloq.com/web-design-tips/examples-of-html5-1233547xamples-of-html5-1233547

http://www.html5rocks.com/en/http://www.html5rocks.com/en/

CSS (Cascading Style CSS (Cascading Style Sheets)Sheets)

Style definitions for look and feel can be inline, Style definitions for look and feel can be inline, in a separate file, or in the <head> of the in a separate file, or in the <head> of the document.document.

Describe color, size, font style and some Describe color, size, font style and some interaction now blurring the lines a bitinteraction now blurring the lines a bit

Media queries = responsiveMedia queries = responsive

Paths can be relative or absolutePaths can be relative or absolute

Floating, scrolling, and centering.Floating, scrolling, and centering.

Modern stuff, table layout, flexbox, not Modern stuff, table layout, flexbox, not supported yet everywheresupported yet everywhere

Javascript Javascript (not java)(not java)

Most ubiquitous language, also can be inline, in the head, or Most ubiquitous language, also can be inline, in the head, or in a seperate file.in a seperate file.

Similar to C syntax lots of bracketsSimilar to C syntax lots of brackets

Variables vs Functions vs Objects {}Variables vs Functions vs Objects {}

Actually a lot of hidden features and very flexibleActually a lot of hidden features and very flexible

Scope is important concept, window object, event Scope is important concept, window object, event propagationpropagation

Console, debugging with developer tools or firebugConsole, debugging with developer tools or firebug

Polyfills for patching older browsers to give them supportPolyfills for patching older browsers to give them support

General coding tipsGeneral coding tipsGood editor with code completion and syntax Good editor with code completion and syntax highlighting (webstorm or rubymine highlighting (webstorm or rubymine recommended)recommended)

Close all tags first then fill it in.Close all tags first then fill it in.

Test at every change in all browsers if possible. Test at every change in all browsers if possible. Get a virtual box and free vm’s from ms: modern.ieGet a virtual box and free vm’s from ms: modern.ie

Get a simulator, download xcode and android Get a simulator, download xcode and android simulatorsimulator

Minimize the tags to only what you need.Minimize the tags to only what you need.

Semantics: stick to what the tags are forSemantics: stick to what the tags are for

JqueryJquery

Javascript framework, used everywhere. Free and Javascript framework, used everywhere. Free and open source. open source.

Simplifies common tasks with javascript and the Simplifies common tasks with javascript and the DOMDOM

$ = get this element or group of elements using a $ = get this element or group of elements using a selectorselector

Vast selection of PluginsVast selection of Plugins

$.ready = when document (DOM) is completely $.ready = when document (DOM) is completely loaded and ready to be usedloaded and ready to be used

BootstrapBootstrap

CSS and JS Framework from Twitter for rapid CSS and JS Framework from Twitter for rapid development of User Interfaces (Prototyping)development of User Interfaces (Prototyping)

Include the CSS file and js fileInclude the CSS file and js file

Use the various components as needed.Use the various components as needed.

Override styles as necessaryOverride styles as necessary

http://getbootstrap.com/http://getbootstrap.com/

Available themes: wrapbootstrap.com (paid), Available themes: wrapbootstrap.com (paid), bootswatch.com (free)bootswatch.com (free)

Modern front end web Modern front end web developmentdevelopment

HAML and SASS, Compass, Less, HAML and SASS, Compass, Less,

Static site generators: middleman, jekyllStatic site generators: middleman, jekyll

Coffeescript (simpler syntax for javascript)Coffeescript (simpler syntax for javascript)

Grunt and Yeoman (build anddependency Grunt and Yeoman (build anddependency management)management)

Node JS (back end or server side javascript)Node JS (back end or server side javascript)

MVC frameworks: backbone js, angular jsMVC frameworks: backbone js, angular js

http://updates.html5rocks.com/2013/11/The-Lanhttp://updates.html5rocks.com/2013/11/The-Landscape-Of-Front-end-Development-Automation-Sdscape-Of-Front-end-Development-Automation-Slideslides

Server sideServer sideServer sits and wait for requests. It responds with Server sits and wait for requests. It responds with some data depending on the type of the request some data depending on the type of the request and what’s in it.and what’s in it.

Port 80 is reserved for website traffic so anything Port 80 is reserved for website traffic so anything coming on that port is routed to the webserver on coming on that port is routed to the webserver on the machine. Apache, Nginxthe machine. Apache, Nginx

The server says oh this is a request for a rails page 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 so let’s hand this off to rails let it do its thing then respond with the result.respond with the result.

Rails runs some logic based on the request Rails runs some logic based on the request variables, session values and checks the database variables, session values and checks the database if needed to look up more dataif needed to look up more data

Basic Server AdminBasic Server Admin

Windows vs LinuxWindows vs Linux

Terminal basics: cp, rm, cd, whoami, pwdTerminal basics: cp, rm, cd, whoami, pwd

Services need to be running and healthy like Services need to be running and healthy like mail, bind (dns), os level stuff disk space etcmail, bind (dns), os level stuff disk space etc

SecuritySecurity

BackupsBackups

http://community.linuxmint.com/tutorial/view/1http://community.linuxmint.com/tutorial/view/10000

Version ControlVersion Control

Git/Github - distributed version controlGit/Github - distributed version control

SVN/CVS - older non distributedSVN/CVS - older non distributed

BranchingBranching

Merging diffsMerging diffs

Pushing to masterPushing to master

https://www.atlassian.com/git/workflowshttps://www.atlassian.com/git/workflows

Backbone JSBackbone JSFront End Framework loosely based on MVCFront End Framework loosely based on MVC

M = Model, V = View, C = ControllerM = Model, V = View, C = Controller

Model = Data/Business LogicModel = Data/Business Logic

View = Display/HTMLView = Display/HTML

Controller = Handles site operational logic, pull some Controller = Handles site operational logic, pull some data show a viewdata show a view

http://backbonejs.org/http://backbonejs.org/ (docs and annotated source) (docs and annotated source)

Requires underscore and jquery or equivalent $ Requires underscore and jquery or equivalent $ functionfunction

Backbone ModelBackbone ModelEcapsulates an object’s data properties Ecapsulates an object’s data properties and storage/retrieval methodsand storage/retrieval methods

var myModel = Backbone.Model.extend({...})var myModel = Backbone.Model.extend({...})

myModel.on(“someEvent”, doSomething()) Listen to myModel.on(“someEvent”, doSomething()) Listen to attribute changes and update viewattribute changes and update view

Getting/Setting properties: Getting/Setting properties: myModel.get(“myPropertyName”)myModel.get(“myPropertyName”)myModel.set(“myPropertyName”, “someValue”)myModel.set(“myPropertyName”, “someValue”)myModel.set(“myPropertyName”, {various:”properties”, ...})myModel.set(“myPropertyName”, {various:”properties”, ...})

myModel.toJSON() - convert to json stringmyModel.toJSON() - convert to json string

URL property - points to the url of the json data sourceURL property - points to the url of the json data source

sync/fetch/save - pull and save data from the serversync/fetch/save - pull and save data from the server

Backbone CollectionBackbone Collection

var Library = Backbone.Collection.extend({var Library = Backbone.Collection.extend({ model: Book model: Book});});

A lot of the same methods as modelsA lot of the same methods as models

Can sync them with data source just like Can sync them with data source just like modelsmodels

add - adds a modeladd - adds a model

remove - removes a modelremove - removes a model

Ordered sets of Models - updating and Ordered sets of Models - updating and retrieving models from a set easier.retrieving models from a set easier.

Backbone ViewBackbone View

El property - dom elementEl property - dom element

If you don’t use El, it creates a div If you don’t use El, it creates a div unless you give the view “tagName”unless you give the view “tagName”

Rendering - use render() functionRendering - use render() function

Templates - reusable pieces of htmlTemplates - reusable pieces of html

Events - trigger and listen to eventsEvents - trigger and listen to events

Encapsulates a dom element on the Encapsulates a dom element on the pagepage

Example Backbone ViewExample Backbone View

var DocumentRow = Backbone.View.extend({ tagName: "li", var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", events: { "click .icon": "open", className: "document-row", events: { "click .icon": "open", "click .button.edit": "openEditDialog", "click .button.delete": "destroy" "click .button.edit": "openEditDialog", "click .button.delete": "destroy" }, initialize: function() { this.listenTo(this.model, "change", }, initialize: function() { this.listenTo(this.model, "change", this.render); }, render: function() { ... }});this.render); }, render: function() { ... }});

Backbone EventsBackbone Events

_.extend(myObject, Backbone.Events);_.extend(myObject, Backbone.Events);

myObject.on(“someEvent”, function(msg)myObject.on(“someEvent”, function(msg){alert(“msg: ”+msg)}){alert(“msg: ”+msg)})

myObject.trigger(“someEvent”, msg)myObject.trigger(“someEvent”, msg)

Models, Views and Collections all extend from Models, Views and Collections all extend from events so you have them already.events so you have them already.

Events is a module that can be mixed in to any object, giving the object the Events is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named eventsability to bind and trigger custom named events

Backbone RouterBackbone RouterManages urls and browser historyManages urls and browser history

extend router then call Backbone.history.start()extend router then call Backbone.history.start()

routes match url patterns:routes match url patterns:

var Workspace = Backbone.Router.extend({ routes: { "help": var Workspace = Backbone.Router.extend({ routes: { "help": "help", // #help "search/:query": "search", // "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, help: function() { ... }, search: #search/kiwis/p7 }, help: function() { ... }, search: function(query, page) { ... }});function(query, page) { ... }});

Backbone ResourcesBackbone Resources

http://arturadib.com/hello-backbonejshttp://arturadib.com/hello-backbonejs

http://tutorialzine.com/2013/04/services-chooshttp://tutorialzine.com/2013/04/services-chooser-backbone-js/er-backbone-js/

http://ricostacruz.com/backbone-patternshttp://ricostacruz.com/backbone-patterns

http://backbonetutorials.comhttp://backbonetutorials.com

https://github.com/jashkenas/backbone/wiki/https://github.com/jashkenas/backbone/wiki/Tutorials,-blog-posts-and-example-sitesTutorials,-blog-posts-and-example-sites

Mobile web Mobile web developmentdevelopment

HTML5 vs Native vs HybridHTML5 vs Native vs Hybrid

PhoneGap PhoneGap

Appgyver - fast way to get an app on the Appgyver - fast way to get an app on the phone and developmentphone and development

Objective C/xcode - Native IphoneObjective C/xcode - Native Iphone

Android: JavaAndroid: Java

Key TakeawaysKey Takeaways

Don’t give up the more you see it the more it will Don’t give up the more you see it the more it will sink insink in

Do free/cheap work until you get goodDo free/cheap work until you get good

Pay attention to the minor detailsPay attention to the minor details

User experience is paramountUser experience is paramount

Always do what it takes to meet goals while Always do what it takes to meet goals while managing the tradeoffs and complete as fast as managing the tradeoffs and complete as fast as possiblepossible

Stay on top of new techStay on top of new tech

QuestionsQuestions

Have any questions speak up!Have any questions speak up!