Learn all the basics of web app development including bootstrap, handlebars templates, jquery and angularjs, as well as using hybrid app deployment on a phone.

1. Intro to Web App
Development
Zane Staggs - @zanedev

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://
goo.gl/lNCzIX
Slides: http://goo.gl/PJvfBl
Code download zip (easy): http://goo.gl/MYWjg6
Code git repo (advanced): http://goo.gl/Hq3RgL
Google Chrome Browser

3. Class 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, bootstrap 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.

4. Your instructor
Husband, Father and Developer
Living the dream
Coding House
MIS graduate U of Arizona
BetterDoctor

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!

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

7. Why would you want to do this?
Career
Fame and Fortune
Fun, creative
Wild West days of the internet
Technology
Startups

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

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
http://en.wikipedia.org/wiki/
Comparison_of_web_browsers

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

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

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

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. Example DOM Tree

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

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

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

18. Quick Break and then
Let’s get to coding
HTML
CSS
Javascript
Jquery, Bootstrap, Angular JS

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>
http://www.w3schools.com/html/html_quick.asp

20. 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/
examples-of-html5-1233547
http://www.html5rocks.com/en/

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 = tablets/phones/etc
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. http://caniuse.com

22. CSS Box Model

23. You try it
Change the body background color to green using an
ID in the stylesheet.
Change the checked out books button style to btn-info
Change the title “Library of Books” to something
different.
Change all books to have a blue background color.

24. Javascript
(not java!)
Most ubiquitous language in the world, also can be inline, in the head, or
in a separate 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

25. General coding tips
Use a good editor with code completion and syntax highlighting
(webstorm recommended)
Close all tags first then fill in the content.
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: modern.ie
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

26. Developer Tools

27. Jquery
Javascript framework, used everywhere. Free and
open source.
Simplifies common tasks with javascript and the DOM
$(‘.login-button’) = 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

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.
Bonus Points: Fix problem with not being able to click
on item after checking out/returning book.

29. Bootstrap
CSS Framework from Twitter with common js plugins.
Include the CSS file and js file
Use the various components as needed.
Override styles as necessary
http://getbootstrap.com/
Lots of themes: wrapbootstrap.com (paid),
bootswatch.com (free)

30. You try it
Add a bootstrap carousel to our page, use images from
place it as temporary images if you don’t have any:
http://placehold.it/500x280
Bonus: add a navigation bar and prev/next buttons.

31. MVC Frameworks
BackboneJS, AngularJS
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

32. Front End Templating
Assists with handling lots of markup and data manipulation.
Built in to Underscore but Handlebars is a more robust templating solution:
http://handlebarsjs.com/
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)

33. Let’s try it together
Let’s use handlebars for our book item html and data

34. Angular JS
“Superheroic” Framework.
Declarative = higher level and easier to understand.
What HTML would have been had it been designed for
web apps
Less code to write lots of magic included

35. 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

36. Two Way Data Binding
View is automatically in sync with the model

37. 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.

38. 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.

39. 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...
}

40. 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).

41. Routes
Single page app support.
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 define the routes

42. Animations
Based on CSS
Adds the proper class names before and after
Must include angular-animate.min.js
http://code.angularjs.org/1.2.10/docs/guide/
animations

43. 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
https://github.com/angular/angular-seed

44. Give it a shot together
Let’s use Angular instead of jQuery

45. Angular Links
http://net.tutsplus.com/tutorials/javascript-ajax/5-
awesome-angularjs-features/
http://angular-ui.github.io/bootstrap
http://www.youtube.com/watch?v=9TylaL_cRFA
https://egghead.io/

46. 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)
http://updates.html5rocks.com/2013/11/The-
Landscape-Of-Front-end-Development-Automation-
Slides

47. 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

48. AppGyver
Handy framework for wrapping an html app and
putting it on a device, app store.
Based on phonegap/cordova
Gives you better transitions, more native feeling app.
Very fast to use and get started.
http://www.appgyver.com/

49. Key Takeaways
Don’t give up the more you see it and use 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.
JS templating helps with displaying data into views
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.
Native vs Hybrid apps, Native has faster UI but Hybrid uses web
technologies and covers more platforms but lots of time spent
fiddling with the webview. Gap is getting narrower but not one to
one yet.

50. Questions
Have any questions speak up!