Monthly Archives: October 2014

DRAFT – JavaScript + Frameworks – get with the program

Brief History of Javascript

Javascript was invented for an ancient browser called Netscape. It was cloned by every major browser after it – Internet Explorer, FireFox, Opera, Chrome, etc. It was looked down as not a real language since it was:(

  • (then) Not fully compiled. Thus must be slow*. (now) Very very fast. Compilers exist (CoffeeScript, TypeScript)*
  • (then) It was loosely typed. (now) Compilers provide strong typing.*
  • (then) It ONLY ran in a browser. (now) Browsers took over the world. App Frameworks support Javascript too.*
  • (then) It was partially OO and fully prototyping based. OO purists were aghast. (now) Compilers provide full OO.*
  • (then) It lacked some real tools languages had: IDEs, unit testing. (now) Several IDEs. Several Unit Test frameworks.*
  • (then) It was attached to awful HTML which was going to die anyway, that had NO PROGRAMMING and NO separation of presentation from content like it’s father SGMIL. (now) CSS and HTML 5 fix all that. And PS HTML is alive and thriving despite many attempts to replace it which all died.
  • (then) It had no way to store or serialize data or transfer server and cloud data. (now) XML and JSON (preferred)  for serialization.
  • (then) HTTP was chunky and all page changes required the whole page round trip to the server (now) Ajax and several other partial page refresh technologies are easy.
  • (then) Visual Basic syntax was the rage and Javascript was not. (now) C# and Java brought C++ syntax back and devastated VB so Javascript required less learning for C#/C++/Java programmers.

Then the Internet did not go away. And browsers did not go away (although Apps arrived as an extra channel besides browser to get to the cloud data) in fact people preferred them to Desktop apps. And a rich cloud started growing up.

 

BTW ironically developers rarely EVER use the (now) bullet points in their apps. They were just a convenient excuse to not learn Javascript.

And suddenly not doing Javascript was fatal to a developer’s career.

Some Javascript Humor

Javascript is serious business. So here is some more lighthearted Javascript links

The rise of Javascript Frameworks vs. Libraries

Javascript was adopted quickly by hardcore C++ and C# and Java programmers. Plus open source hippies and capitalists. Those types lost passion for libraries a decade ago, so focused on a few frameworks that duked it out to become THE framework: JQuery, Dojo, Angular, etc.  because they were super familiar with Separation of Concerns, and time was limited because they snobbishly ignored it for over a decade and a half, the frameworks did not attempt to be the one true framework.

  • So a lazy smart Javascript developer can use 1 or more frameworks without causing any clashes.
  • The frameworks are so tiny every framework  added up together took a tiny fraction of what the Java and C# frameworks took up, so combining was an easy decision.
  • They invented minification and bundling which really helped the browsers compress code, and allow browsers and servers to be able to more readily cache multiple frameworks and components. Vstudio ASP.net MVC did this all automagically.

People needed to write very little Javascript code and get BIG results and libraries would not get them there. Frameworks got them there in style.

What are some Frameworks good developers use, and why?

Do you have to use them all? Absolutely not. Should you consider them and know when to use them, and when not. And promise not to be a “Devil I know is better than Angel I don’t know” JS Framework bigot. One of those people that once they choose one framework use confirmation bias to dismiss the value of every other framework.

  • Angular.js – making MVC (Model-View-Controller) style framework coding with Javascript on client and server much easier if you code the right patterns. It is much much more extensive than every other free framework here, and has a lot of power and a steeper learning curve because of the scope of features. Read more @ https://angularjs.org/.
  • Backbone (depends on underscore.js and JQuery) brings models/views/events to JS programming in a minimalist way to reduce learning curve and “lock in” and interop well with other frameworks, Get it/read about it @ http://backbonejs.org/
  • Bootstrap is not really a Javascript technology, it is all about simplifying CSS, but since so many JScripters use it at least learn about Bootstrap and consider it.
  • D3 – Data Driven Documents and Transformation focused on CSS, SVG and HTML 5. Get it @ http://d3js.org/ and there are a ton of plug-ins @ https://github.com/d3/d3-plugins.
  • Dojo is the favored big framework before Jquery. IBM and others blessed it for clients impressed by name dropping. A ton of Javascript components are built on top of it including Graphing and Charting and custom tags and much more. Get it @ http://dojotoolkit.org/download/.
  • Ember – focused on creating new markup tags and templates that look simple on client, but interact with server transparently. Easy transfer of data to/from server.  Routing to easily control where data is fetched to and from the server. Get it @ http://emberjs.com/.
  • ExtJS/Sencha (depends on YUI) – It is focused on providing a bunch of ready made widgets/controls/custom tags and easy commands to interact and manipulate them. It started out as free under the name ExtJS but evolved into 2 commercial products, and combined with several other open source and commercial products (all towards providing high end HTML 5 and Touch Support and Responsive and multiple device support) to improve it’s versatility. Get at http://www.sencha.com/products/complete/. It costs money but is well worth it on the projects I used it.
  • Handlebars is focused on templates that focus on strong separation of client and server code and ability to switch out the back end languages without breaking the front end templates. It is compatible with mustache. Download/read about it @ http://handlebarsjs.com/.
  • JQuery (see next section) emerged as the #1 framework when Microsoft and Open Source types both promoted the heck out of it.
  • Json is not a framework per se but a data transfer structure almost all frameworks have come to depend on. It’s goal is to be a lighter version “easier for human to read” replacement for XML. Microsoft emraced it quickly and the latest ASP.net MVC releases replace many ASP.net MVC XML contructs with JSON. Read more @ http://www.json.org/.
  • Kendo UI By telerik –  A commercial product focused on providing a bunch of ready made widgets/controls/custom tags that provide responsive/adaptive design and multiple devices. And graphing as well. Read more @ http://www.telerik.com/kendo-ui.
  • Knockout is all about data binding 1-way, 2-way, automatic update and dirty control sensing, dependency tracking, and templating, and the like. – Read more @ http://knockoutjs.com/.
  • Meteor – a framework all about building mobile applications. Read more @ https://www.meteor.com/.
  • Node.js – if you want to do portable cross platform SAS (Software as a service) in Javascript instead of a vendor specific stack (Java, .NET) than Node. js is for you.
  • Modrnizr making conditional browser version code easier – @ http://modernizr.com/
  • Reactive.js (not to be confused with RActiveJS) is a “Microsoft Blessed” library all about Observables + LINQ + Schedulers and something they call “Promises” (basically an easy way to have chatty reliable HTTP conversations) – Read more @ http://reactive-extensions.github.io/RxJS/.
  • Underscore.js – Provides a ton of extremely useful functions missing from JavaScript without in any way extending or altering Javascript syntax. See a nice complete function list @Test Suite of the supported functions that can save you a ton of time. Read More/Download @ http://underscorejs.org/.
  • YUI (Yahoo UI library now abandoning new development as of August 29, 2014) – is an oldie but goodie – a way to build UI components (custom tags, widgets, components). Not very active anymore but many sites were built with it, and many components built on top of it. The principles that created it have left, Yahoo is not subsidizing it anymore and it’s future is dead, unless some important group or person rescues it.
  • Browser sniffing on steroids, a Commercial product ($$$)  @ http://51degrees.com/Products

jquery_logo

JQuery – father and grandfather to many

JQuery is a framework that many other libraries are built on top of. So you probably will download JQuery plus a bunch of goodies.

  • xxxxx
  • xxxxx

xxxxx

JS Pre-Processor and Sister Languages

Compilers have been created as proof of concepts for upcoming compiled JavaScript standards. Technically Emmet and Less are listed here not because Javascript is their central focus, but because Javascript and other programmers get frustrated quickly by lack of programming commands in CSS and HTML and these really help.

  • Emmet (used to be Zen) -a pre-processor that is used to make HTML and CSS much easier with snippets, dynamic snippets and editor helpers/expansion. Read more @ http://emmet.io/.
  • Less – a pre-processor that is used to make CSS much easier and add simple programming syntax/constructs and extensions and mix-ins. Read more/get it @ http://lesscss.org/.
  • Zen  – OBSOLETE, replaced by Emmet.
  • Typescript Javascript compiler – Read more/get it @ http://www.typescriptlang.org/*
  • CoffeeScript is a smaller, lighter version of the kind of beast Typescript is. Read more/get it @ http://coffeescript.org/*

These are being used heavily by the more serious developers.

CoffeeScript vs. Typescript is a raging debate that shortly ended with Typescript beating CoffeeScript for now (and probably CoffeeScript’s death). The 800 pound gorilla in the room was Microsoft producing a 1st class version of Typescript integrated with Visual Studio (including interactive debugging) and getting heavily involved in filling out the Javascript standards teams with people and financial donations. Here is a great history of the many Javascript compilers and languages that predate the victory, for now, of TypeScript.

JS IDEs and Debuggers

Then IDEs and Debuggers and Tools appeared. Oh my.

Visual Studio began to every release address Javascript more as a 1st class citizen.

IDEs appeared for Javascript like:

so-why-choose-us

Why use Javascript Frameworks instead of raw Javascript?

Well many reasons…

  • It is more OO. Which if you disregard the King and the Toaster story is a bad thing.
  • The learning curve is less.
  • Event-driven and Event Bubbling.

xxxx

keep-calm-and-choose-wisely-33 index

Why not use Javascript Frameworks?

xxxx

Tight coupling with all the associated issues that raises: version upgrade breakage,

Size – hmm every library needs a Library + the framework. But JS frameworks are tiny.

xxxxx

can-stock-photo_csp8210545

Online Tutorials I love

xxxx

  • xxxx
  • xxxx

xxxx

tutorial-video-purple

Video Tutorials

xxxx

  • xxxx
  • xxxx

xxxx

bookshelf bookshelf-python-for-dummies

Books on Javascript and Frameworks I Love

xxxx

  • xxxx
  • xxxx

xxxx

How to get Javascript Help!

My favorite places to solve any javascript problems I encounter:

Enjoy your Javascripting – Chaz

Sunglasses-Me