Java Script Framework

From DevSummit
Jump to navigation Jump to search

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]
Retrieved from "https://devsummit.aspirationtech.org/index.php?title=Java_Script_Framework&oldid=51"