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,245