Update:State of the JavaScript Development World

JavaScript has become not just an essential Web programming language but vital in general IT development. The rise of JavaScript as the dominant Web Language was cemented in November by Matt Mullenweg. Matt is the CEO of Automattic, the owners of WordPress.com and leader of WordPress development strategy. In November of 2015 Matt introduced Calypso an entirely JavaScript-based front-end for WordPress.com. See our briefing on whats in Calypso here. Subsequently Matt said:

Learn JavaScript deeply.

So we took an end of 2016 look thru W3techs on the state of usage of JavaScript Libraries worldwide – the bottom line is that JavaScript is not used on 25% of all the worlds websites. And the spread of JS usage is fascinating:

It appears older adopted JS libraries like Prototype and YUI from 5 to 10 years ago continue to hold sway. buth there is no doubt that tere is great interest and growth in the UI/UX based JavaScript libraries.

UI/UX Web Libraries Proliferate

This Web usage is also reflected in the UI/UX layout arena for SPA-single page applications where JavaScript frameworks like Twitter Bootstrap 4, Foundation Zurb 6 , and Ink 3 have started a swelling of landing page and fast SPA-Single Page Application  developments to give CMS like WordPress, Webs, and Weebly a run for the money of more small business users. So it should not be a surprise that  some of the most popular themes/templates in WordPress, Joomla and Drupal use these JavaScript libraries for quick layout with helpful components and widgets.

These SPA libraries are echoed on the JavaScript side with some traditional full service JavaScript frameworks that supply a robust set of UI components/widgets and direct connections to a variety of SQL and other databases.
DHTMLx – solid web components and database connections, free basic edition
EasyUI – jQuery-based  framework with 41 UI widgets/components
EXTjs – a whole family of tools including interactive editor, premium prices
jKit – jQuery-based  framework with 44 UI widgets/components & template system
jQWidgets – jQuery-based framework with many integrations & free for personal use
Kendo-ui –  jQuery-based UI framework free for personal use, fee for commercial use
Wijmo 5 – Typescript based UI mobile + data charting framework for license fee
Zinoui –   jQuery-based  framework with Canvas and slider components
The downside to these tools is that they need to fill-in gaps in touch, mobile, message-handling,two-way binding  and/or responsive functionality giving an opening to a huge wave of newer frameworks that handle these problems plus add live model connections.

Enter the new group of Hybrid JavaScript Frameworks. These tools take advantage of Phonegap and Cordova to deliver apps that run on the key mobile systems – iPhone iOS and the Android ecosystem in native mode. Also they allow access to native mobile functionality like topbar, tabbar, Camera, accelerometer, fine geolocation, SMS, mobile files and Contact system, etc So these apps are nearly as fast as native iOS Xcode or Android Studio apps.

But the added benefit is that these same apps  can run on PC/Mac laptops and desktops because they are HTML5+CSS+JavaScript at their core and can emulate or hide mobile-only functionality. Finally most of these Hybrid App systems have good IDEs for point and click UI/UX design while incorporating the latest JavaScript data modeling frameworks.
Ionic – uses Angular and Cordova to develop and deliver micro-apps
Onsen UI – uses Monaca for an IDE and supports Angular, React and jQuery for its  apps
Intel XDK – supports the broadest set of mobile platforms and App templates
Framework7 – supports iOS only but fast native apps designed in HTML+CSS+JS
jQuery Mobile – apps run in iOS and Android but with its own Material Design-like style
Trigger.io – has tight link to native components; thus better perfromance, premium prices
Famo-us – supports wide set of 2D & 3D libraries for animation & game micro apps

This modern  group of data modeling [MVC, MVVM, etc]JavaScript frameworks  have also been used in both CMS systems and single page apps. Many of these apps are free or open source:
Angular.js – Google inspired mobile/desktop MVC framework
Aurelia.js –  emerging JS framework based on Durandal and Angular
Backbone.js – is a popular MVC framework  library
Ember.js –  forefront  MVC and ECMAScript 2016 with 2-way binding etc.
Knockout – original MVVM framework with components
Meteor – handles both client & server side JavaScripting with robust tools
Polymer – delivers Web components with heavy npm, bower, gulp, grunt todos
PrimeFaces – derives its web components from Jfaces
React.js – provides robust Viewer capabilities to MVC designs
Vue.js – smoother component, directive, template model
These two groups of JavaScript frameworks for UI/UX & Modeling [traditional vs modern] have made the choice of a JavaScript framework for broad Web app development a particularly difficult choice at this time. Free versus premium, traditional vs modern, server-adept vs client-server only,  variations in performance depending on scale and interactions; these are some of the tough issues that have to be resolved in a tools market that is rapidly evolving. But the bottom line is the rich JavaScript plugin market also expands.

JavaScript Usage

W3Techs has an interesting table of the increasing use of major JS libraries:
The trends are fascinating. 5 years ago JavaScript was only used on 4 of 10 websites; now the number is 7 in 10. And jQuery is by far the most commonly used JavaScript library at a stunning 72% of all websites. But look at the growth of Bootstrap – very fast, more than  doubling to  14% in 2 years. In contrast, Angular, Backbone and Knockout among the “new breed” JavaScript frameworks languish at less than 0.5% usage.

To get the latest usage rates of  different JavaScript libraries try LibScore:

This is a useful method in finding out what websites are using what JavaScript frameworks and their growth rate.  But what is truly astonishing is the wide number of libraries available. Apple touts “there is an app for that. Ditto, WordPress can say “there is a plugin for that”. Well now one can say, “There is a JavaScript library for that”.

There Is A JavaScript Library For That

Meanwhile the JavaScript UI frameworks have given a big push to data management and presentation software, giving new impetus to various data charting and presentation scripts. So it should be no surprise that  there is a flood of very good and often open source charting, drawing and data graphic display libraries in JavaScript. Here are some of the notable ones:
Bonsai.js – library  with intuitive graphics API and an SVG renderer.
Babylon.js – JS framework for building 3D games with HTML5, WebGL & Web Audio
CanvasExpress – free, robust2d & 3D charting library
D3.js – open charting and data display library with scores of code examples. Also supports component libraries like C3, D3Chart, NVD3, EmberCharts, etc
Chartist.js – smooth charting integrates with angular, ember, meteor, react, etc
Draw2d – create Visio-like diagrams in canvas layout
Dygraphs – charts large datasets associated with huge databases
FamousEngines – 3D physics engine and interface framework
Fusioncharts – free for non-commercial use, wide range of 2D & 3D charts
Numeric.js – provides advanced math functionality to JavaScript
oCanvas – creates objects and diagrams in HTML5 Canvas
SimpleStatistics – basic to advanced statistics routines
SnapSVG – create SVG based drawings and diagrams
Velocity – does high speed animations using jQuery model
Vivus – does simple, effective SVG animations – great for live logos
These are solid tools that illustrate the robust capabilities of JavaScript.

The logical extension to the above tools are JavaScript libraries supporting BI – Business Intelligence and Reporting. There is a wide range of free and premium libraries:
Breeze.js – interfaces to database tables with advanced queries
Cytoscape – directed graph JS library
DataTables – JS grids + tables with sorting, filtering and paging
Dataset – JS data loader and styler
Envision – a JavaScript time series data loader and animation tool
Gantt Charting – jQuery Gannt charting routine
JIT – a very rich set of JS data visualization routines
JSreports – json and data tables report writing, free for non-commercial
Processing.js – data visualization routines in JS
Reclinejs – data interface and handling JS routines
SlickGrid – lightning fast JS grid/spreadshet
Visualize.js – taps into Jaspersoft report and analytics with JS framework

My personal favorite is JavaScript libraries for editing and coding:
ContentTools – you have to visit and see what this free JS editor does
Froala – JavaScript  WSYIWYG HTML editor
Raptor Editor – inline JS HTML editor with many options
Tangle – JavaScript library for creating reactive documents
TinyMCE – of WordPress fame is JavaScript based
It is easy to add these tools into a Bootstrap or Foundation Zurb app so that users comments and other text messaging is handled well.

And  photographer and designers have a wealth of graphic presentation tools many of which are dual ported – JavaScript library and WordPress plugin:
FlipBook – magazine/newspaper-like page flipping component for JS+WP
Imgrid – responsive image grid with 4 layouts, 20 effects, lightbox, filtering, etc.
Lollipop – image editor with flip, rotate, crop, sharpen, brighten, saturate, etc
PhotoGrid Pro – interactive JS+WP image grid builder with animations and text effects
RoboCrop – image crop plugin using touch and mouse gestures
Showup – innovative lightbox with animation and themes
ShufflePuzzle – JS+WP image broken into puzzle grid for touch, mouse solving
Slider Revolution – animated JS+WP sliders with layers, lightbox, carousels, etc.
SnapGallery – free, jquery based responsive gallery plugin
This is a very small sample of the scores of media savvy JavaScript plugins and libraries available to javaScript users.

In this next group, I personally hold my nose [nose –hold g] when I have to use the growing number of JavaScript command line  libraries geared to  operational Web development. True, they are blazingly fast but also maddeningly  inscrutable when errors crop up somewhere in the chain of interconnected  routine calls. But these tools command great mindshare and presence among the new breed of JavaScript libraries:
Bower – is a package manager for Web package: node, git, npm dependent
Gulp – is streaming build system overlaps Grunt: npm, require
Grunt – task runner for minification, compilation, unit testing, linting etc
Node – largeest package ecosystem on the Web
RequireJS – is a JavaScript file and module loader
There are many other JS operational routines. Read this review for an idea why there are so many JS operational routines and why they are open but opaque. One of the attractions of  Meteor.js is that it takes over and  manages many of these operational tasks itself.

And there is more – some great websites showing good JavaScript libraries both free and pro or premium ones:
CodeCanyon JavaScript – dozens of premium plugins with good rating system
JavaScripting.com – is a database of JavaSccript plugins/libraries
jQueryRain – shows hundreds of jQuery based plugins across 39 categories
Unheap – has a neat set of free and pro JavaScripts by category
In sum,finding good JavaScript tools and libraries is easier than ever before.

Beyond the Web, JavaScript is used extensively as a scripting language for Adobe  products such as Acrobat, Dreamweaver, Illustrator, InDesign, and Photoshop. Likewise almost all of the major browsers use JavaScript for their extension libraries.

However, JavaScript has evolved over the years – very slowly, almost stealthily as 3rd parties such as Mozilla, Google, and other software vendors advanced JavaScript against a strong opposition from Microsoft [this circa 2000 position has reversed in Redmond in recent years]. Ajax and JavaScript performance improvements by Google turned the prospects of JavaScript around. So now JavaScript has some very desirable performance characteristics beyond its wealth of libraries.

Beyond the Libraries: JavaScript Web Performance

Web performance has three components: speed, reliability and security. For example, speed has become a critical measure in Web development. Google now includes speed of load time as a key ranking component for a website. And there are countless studies that show how important website response time is for conversions and buying:

1. The Obama campaign  redesigned its pages for online donations with a 60% increase in speed leading to an increase of  $34 million in  donations;
2. Mozilla increased its Firefox downloads by 60 million per year by getting their pages to load 2 seconds faster;
3. Almost half of users expect websites to load in two seconds or less (Akamai)
4. 51% of online shoppers in the US will not complete a purchase if the site is too slow (Radware)
5. A one second delay in response can result in a 7% decrease in conversions (KISSmetrics)
6. More than half of users abandoned websites that took more than 3 seconds to load (Akamai)
7. Conversions increase 74% when load times drops from 8 to 2 seconds (ConversionXL)
8. Converted shoppers receive pages that loaded 2x faster than non-converted shoppers (Web Performance Today)
9. Walmart discovered that for every 100ms increase in site speed, their revenue increased by 1%. With every second of reduced load time, their conversion rate increased by 2%.

It  turns out site speed is vital as Walmart discovered. So it is important to consider that among all the popular Web programming languages including Pearl, Ruby, Lua, Haskell – JavaScript is the fastest. Only PHP comes close but as the table below shows, JavaScript outperforms PHP in  tests done on identically the same hardware and OS test machine. The JavaScript is the Chrome V8 engine; PHP 7.01 with Zend Engine 3.0.0

JavaScript vs PHP  Speed & Code Size Comparisons http://benchmarksgame.alioth.debian.org/
Test	JS speed	JS size	PHP speed	PHP size
binarytree-12	0.60 sec	6.00 kb	0.37 sec	1.28 kb
binarytree-20	48.92 sec	937.6 kb	237.49 sec	440.5 kb
fannkuch-redux10	0.51 sec	11.06 kb	9.52 sec	7.78 kb
fannkuch-redux12	89.06 sec	11.07 kb	300.80 sec	7.79 kb.
fannkuch-redux3-10	0.44 sec	11.04 kb	1.66 dec	29.17 kb
fannkuch-redux3-12	74.47 sec	11.07 kb	300.80 sec	29.2 kb
fasta2-25k	0.43 sec	22.86 kb	1.37 sec	7.81 kb
fasta2-25000k	25.64 sec	43.07 kb	135.7 sec	7.76 kb
knucleotide-25k	3.18 sec	53.09 kb	0.28 sec	6.41 kb
knucleotide-25000k	283.31 sec	425.68 kb	21.76 sec	230.45 kb
regexdna2-50k	0.07 sec	?	0.08 sec	?
regexdna2-50000k	3.44 sec	584.3 kb	5.18 sec	153.24
revcomplmt-50k	0.45 sec	21.32 kb	0.10 sec	?
revcomplmt-50000k	31.77 sec	341.53 kb	4.13 sec	368.92
spectralnorm-500	0.15 sec	?	0.81 sec	16.04 kb
spectralnorm-500	15.72 sec	13.31 kb	44.45 sec	21.58 kb
spectralnorm3-500	0.15 sec	?	0.63 sec	17.08
spectralnorm3-500	15.71 sec	13.24	65.63 sec	21.68

Note green highlighting indicates faster code or smaller code size. True, PHP generally has a smaller runtime code size and JavaScript has smaller code loads, but speed of load and runtime is the critical factor. Of even more import is the fact that JIT compilers in Firefox and Chrome JavaScript Engines  produce native code. And  there are programs available for converting JavaScript into native [and faster] iOS, Android or even desktop code.

On the security side, JavaScript and its major web contender, PHP, are often faced with the same security hazards: SQL injection, XSS  cross site scripting, clickjacking , Mime type switching and hack attacks on older and more vulnerable versions of their software. This is another important area where JavaScript has an advantage over PHP. PHP on the server side is updated much less frequently than browser versions of JavaScript. For example, Chrome, Opera and Edge offer automated updates to their browsers including JavaScript engine upgrades.

Finally, in terms of reliability, both languages are again dependent on  adherence to good coding standards plus rapid update cycles.  One of the advantages of adopting a PHP or JavaScript framework is that   standards and update cycles are adhered to in the framework. Since PHP has  Laravel, Symfony, Zend and other quality frameworks – there appears to be no decisive advantage in reliability between PHP and JavaScript.

Summary

This review has sought to  emphasize that JavaScript has moved ahead of Web development languages like PHP, Perl, and Ruby. For example, in comparison with PHP, JavaScript leads in  in 5 major respects:|
1)the range of JavaScript resources and libraries is quite broad and now easily exceeds PHP because of JavaScript’s client side strengths;
2)the security of JavaScript vs PHP is a saw-off  [many of the same vulnerabilities] but JavaScript has one major advantage – a faster and broader update cycle;
3)the speed of JavaScript is consistently better than PHP again thanks to the improvements in JS engines by browser vendors like Mozilla, Google, and now even Microsoft;
4)unfortunately for developers, both JavaScript and PHP are very brittle. Misplace or omit a  comma or brace or quote and a developing program likely will fail catastrophically often with obscure error messages and the reported failure point well removed from the actual error code. Thus both JavaScript and PHP have to have good filters and debuggers. JSLint and associated JavaScript filtering tools are a step above their PHP equivalents. As for debugging, it may be case of pick your poison;
5)the availability of JavaScript on both server with node.js [and other tools] plus the rich client world with hundreds of frameworks lead by jQuery, Bootstrap, etc is ahead of the client-side capabilities of PHP.

So simply put JavaScript offers more options than PHP at this time. Now some will want to credit the elegance of the JavaScript language with its lambda functions, sparse syntax, simple array and object definitions and elegant flow of control mechanisms. But this viewer would point out the prototype constructs, strings and their delimiters, some primitive I/O as retorts. Yes, JavaScript is nice but not always easy to code.

But the bottom line is that in the Web World you cannot claim to be a full stack developer without possessing good JavaScript skills. And the rich set of opensource JavaScript tools often with good online documentation and broad IDE support for either design or debugging [if not both], makes JavaScript a fertile programming language.