Java Script Framework

Javascript -- things to know about frameworks!

SO many frameworks, it can be tricky

Beginning list of frameworks:

• Ember
• Angular [very powerful/complex, "magical"]
• Meteor [seems most complex/powerful]
• Express.js
• Sales.js
• backbone.jsf [more basic, least "magical" eg we can see what's doing what, is useful] Backbone with express in a backend
• D3 - data visualizations

WHAT IS A FRAMEWORK

• Javascript is for a web-based application

• 2 philosophies

• 1. set of interlinked libraries -- build out of w/ your own code
  • ex. jquery - langage, doesn't modify code
  • ex. php likes a library

• 2. framework b which code has flows into a structure & includes libraries, it's

packaged

• • ex. works well w/ Ruby, Python

• Javascript frameworks vs front end frameworks. Try to separate the logic from the HTML/dom modification.
  • ex. jquery "touching thigns on page all over" -- not a framework
  • ex. manipulating logic behing page, framework

• Now with increased power applications can be built on the browser, not inside the server; the application existis in the browser

FRAMEWORKS

• Philosophy: angular, backbone
  • things you can add to your HTML, data tags, how to handle server requests [ajaxy things]
  • convention over configuration

• Angular "its like magic" -- takes things out of your head and puts it in the framework

• Ask yourself: how much do you want to get in and do things, vs. a convention-based approach.
  • eg do more vs. you only have so many places of contact

• Frameworks -- declare functions, apply a "data show"
  • gives you more structure, but also not as clear how it does what it does
  • eg. what if it breaks
  • abstracts further out than a library

WHY USE THESE?

• Before frameworks, it was all about one-use applying scripts to DOM [HTML] elements, now it's more about redefining tags which themselves are defined applications.

• eg <map> as a DOM tag relates to a Javascript function

• The word magic has been used 4 times in the first 20 minutes. People love frameworks!

• HOW DO YOU DECIDE WHAT FRAMEWORK to USE?
  • For the last few years, ppl chose Backbone bc it worked well
  • where do you do the application-level binding? Is code in HTML or somewhere else =To DOM elements?

WHAT DOES A JAVASCRIPT PAGE LOOK LIKE?

• LIBRARY: <get some data

• script to do things to data

• coordinate libraries

• configure the page DOM>

• FRAMEWORK:
• go out to the frameworks' functions

• get some data

• configure the page DOM>

• COMPARING FRAMEWORKS

• Backbone* -- backbonejs.org
  • no magic
  • tools for fetching and syncing data
  • DOM manipulation via views function "render" [which do nothing, you have to make those work]
    • to update DOM you have to call render again
• manually write code to change HTML
• has a few on-click events
• very simple objcts taht have clear responsibilities
  • model [data]
  • collection [of modles]
  • view [ties DOM w data]
  • router [ties web to view rendering]
• SImilar to application, iOS development in terms of haow data and view dev works
• only answers in-browser side of things
• Can be very straightforward, doesn't get in the way, also doesn't help out much.
• Can do "weird" things w/
• can help you organize well w/o bringing in too much too do
• need to program in "listen to data, if data changes, render"

• Use Case scenarios:
  • for complex modal, rather stateful triggering operations
  • yes a blog w real-time filtering; hitting filters so results change w/o reloading page

• Ember
  • Rails core team wanted a JS framework
  • Aligned w Rails philosophy
  • For profit company

Angualr

• Came out of a google team
• USed a lot for shopping carts
• Separates data from the view
  • ex. change page title via user
• Good at data binding
  • data binding is "
  • ex. user inputs 2 shirts into cart, bringing info back after user
• Similar to Phython: taking that it gathers data then spews it back out to you
• Relatively easy to learn, lots of documentation
• Hard to debug--2x to debug than to build because it's so automagical
• will re-render page if data changes; will cycle "detect changes on object"
• Angular 2 coming out soon, changing API

Meteor

• both a front-end and a server-side solution
• will generate page and save data
• will have one set of codebase
• if Im on client run x; If I'm on server run x
• have one set of functions that work on client and server -- don't need server and client validation
• a plaform as opposed to a framework
  • acts a bit as Apache; creates complex development
  • has deployment, protocol, et al.
• use case: highly concurrent things
  • eg. replace Web Sockets
• Its easier to take metor apps to make into iPhone / Android apps --> one script to do so
• is a for-profit endeavour
• is a node.js application

node.js

• node is a runtime environment / virtual machine that allows js to run in your server
• node is also a collection of utilities
• is a framework but it's so basic we think of it as a javascript runtim on the server
• gives u a way to package js code in a library structure - this is how ppl share
• program runs on browser, node makes server work
• uses--re-build tools: brunch, grunt, et al [making code changes then show up on browser]

ADDITIONAL LIBRARIES & TOOLS

• brunch, grunt, make:
  • reload, rebuild tools to update browser-based apps after code updates

• Share JS*
  • OS implementation of Google Wave
  • "pipe my data w Share.js" and everything syncs across multiple views

• Marionette
  • extention to Backbone
  • you can read thru source code in a few libraries
  • tied to utility libraries LowDash or UnderScore

• LowDash or UnderScore
  • libraries with additional functions
  • extention to Backbone

• TEST YR FRAMEWORKS
  • todo.app --> test various to-do lists in

• WHATS COMING UP
  • New Javascript is coming: "ES6 Harmony"
  • Will be like Phython + Javascript + CoffeeScript deprecates things like "require JS"

• HOW DO YOU CHOOSE A FRAMEWORK?
  • community maintainers
  • the community stability
    • eg. backbone is stable, angular has massive changes coming up
    • brunch keeps having changes, make doesn't...

• How do you evaluate the community of an open source project>
  • issue queues,
  • how do they do updates? major rewrites all the time vs. bug fixes
  • polite responses,
  • who can make commits,
  • how are patches accepted,
  • are there security alerts,
  • enough people are maintaining other libraries that are not centrally controlled
  • are there versions released...

• WHY MAKE WEB APPS
  • making apps ppl can access on the web makes more open/free applications than the

native apps on devices

• • makes it easier to build components w/o having to learn multiple languages, many

access points

RESOURCES:

• List of JavaScript libraries: en.wikipedia.org/wiki/List_of_JavaScript_libraries

• Learn Javascript! "Series of unfortunate events."

• D3: data visualize what you're building

• Sideprojects

• FireFoxOS --> mobile wrapper; mobile version of firefox, put one line in code
  • is a ROM [runs the phone]
  • the new ones, its a much nicer phone, 3rd party wrappers don't work
  • different philosophy in global disto [smart phone under $100]