JavaScript Frameworks
Dustin Tauer
dustin@easelsolutions.com
@dtauer
http://github.com/dtauer/infotec-2014
Session Files
http://github.com/dtauer/infotec-2014
(links and resources are in readme.md)
Javascript Frameworks
A lot of MV* choices
- jQuery
 - Backbone
 - Angular
 - KendoUI
 - Ember
 - React
 - Batman
 - ...
 
JAVASCRIPT FRAMEWORKS
Even ones that compile to JavaScript
- Typescript/WinJS
 - CoffeeScript
 - Dart
 - Xamarin
 - Unity
 - GWT
 - 
Scala
 
Where do I start?
Start with the basics

WHERE DO I START?
Then pick a framework
http://todomvc.com/
Why do I need a framework?
- Build well structured, easily testable, and maintainable front-end applications with less code and more flexibility.
 - Standardized architecture and code organization
 - 
Modular development
 - Leverage the power of the community
 - AJAX
 - Faster communication with the server
 - Loading different content/pages
 - No browser refresh
 
Which Framework is the best?
The choice is yours
angularjs.org
Vocabulary
- Routes: Urls or pages in the application
 - yourapp.com/#/product/1
 - Views: DOM elements
 - Controllers: Programming controlling elements or switching between views
 - Services: Request remote data, local storage, or help communication between controllers
 - Partials: HTML Templates
 - Web Components: Your own custom HTML elements
 - <infotec-speaker> or <product-details>
 - Angular calls these "directives" but this will change soon
 
Javascript shortcuts
Objects
var person1 = new Object(); person.name = "Dustin";person.sayName = function(){return this.name;}//Object notation var person2 = {name: "Dustin", sayName: function(){ return this.name; }};
JAVASCRIPT SHORTCUTS
Anonymous Functions
function doSomething(){alert("clicked!");}button.onclick(doSomething());//Same code using anonymous functionsbutton.onclick(function(){alert("clicked");});
JAVASCRIPT SHORTCUTS
    Chaining
myImage.move(100,100);myImage.rotate(45);myImage.fadeOut();//Chain calls**myImage.move(100,100).rotate(45).fadeOut();service.get(url).success(doSomething).error(totalFail);
**Chaining only works when functions return references to the object
Let's Code
Thanks!
http://github.com/dtauer/infotec-2014
Infotec 2014: JavaScript Frameworks
By Dustin Tauer
Infotec 2014: JavaScript Frameworks
- 1,261
 
