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 functions
button.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,245