Intro to-html-backbone
-
Upload
zonathen -
Category
Technology
-
view
1.546 -
download
0
description
Transcript of Intro to-html-backbone
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!