Which JS Framework for me?

Question

I have agreed to implement a system which is heavily client side, although my main experience is with decades of embedded s/w and a few years of server-side PHP.

I have implemented one reasonably complex client-side project, using AngularJS - a sort of fleet management thing, fetching data on vehicle movement, displaying Google maps and showing the data in grids with data-bindging. The Single Page App had 3 or 4 main tabs, each with a few sub-tabs, so it was reasonably complex.

However, it was tough going and I spent more learning curve than I had wanted to, plus as it was never deployed in anger (just test mode), I can't be sure if I missed a lot of stuff, probably related to security.

Now, I have agreed to do one for a friend's business, and am not sure which JS framework to use.

I have used Delphi & other such RAD IDEs since it first came out and can appreciate how that can save development time. I am afraid that it might compromise flexibility, though (which Delphi doesn't, but it has been around for decades).

This blog post got me thinking about Sencha-Touch - until I saw the price! No way my friend will spring for that & I'm not buying it for him.

So, what are my options?

MUST:

• be free or sub $100 for commercial use
• support 2 way data binding
• easily, hopefully automatically, configure the MVC, setting up routing, controllers, etc - have good report generation capabilities
• have quick & easy charting, the more eye-candy, the better (grids, histograms, pie charts, Google mapss, etc)
• good AJAX connectivity to my server-side PHP
• good community support & lots of tutorials & examples
• must be stable
• must be extensible, so that I can add code & 3rd party JS where missing
• must be RESTful and have/generate responsive HTML/CSS

Nice to have:

• shallow learning curve

• standard log-in & session management

• maybe some form of security?
• RAD GUI design (drag & drop, if possible, easy preview if not)
• export report data to CSV
• a unicorn would be nice

Note: although browser based, this is intended to be used on 'phones and tablets, rather than desktops (which should not, of course, be precluded).

Answer 1

Since you already have some experience using AngularJS, it may make sense to continue use of that framework for your new app. Angular is one of the most popular JavaScript frameworks for good reason, and it's not just due to Google's support. Indeed, compared to other frameworks, Angular is considered to be one of the easier ones to begin using.

Let's look at a few of your listed requirements with Angular in mind.

• Angular uses an MIT License, so you don't have to worry about costs.
• Stable and flexible. Works well with other libraries.
• Excellent documentation due to a robust user community
• Two-way data binding.
• Several ways to make AJAX requests, including REST.
• Can work with D3.js for data visualization

Good luck with your next app!

Answer 2

I am answering this question with the help of my best friend who's always playing around with these related requirements and mobile development ;)

So I would like to advice you to use jQuery which is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility

One important thing to know is that jQuery is just a JavaScript library in other words it is the core .All the power of jQuery is accessed via JavaScript, so having a strong grasp of JavaScript is essential for understanding, structuring, and debugging your code. While working with jQuery regularly can, over time, improve your proficiency with JavaScript, it can be hard to get started writing jQuery without a working knowledge of JavaScript's built-in constructs and syntax.

• jQuery Mobile (for mobile - responsive)-jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
• jqPlot (for reporting dashboard)-jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features:Pls Ref Demos

Features

jQuery includes the following features:

• DOM element selections using the multi-browser open source selector engine Sizzle, a spin-off of the jQuery project

• dom-traversal and modification (including support for CSS 1–3)

• dom-manipulation based on css-selectors that uses node elements name and node elements attributes (id and class) as criteria to build selectors
• Events
• Effects and animations
• ajax
• json-parsing
• extensibility through plug-ins
• Utilities - such as user-agent information, feature-detection
• compatibility methods that are natively available in modern browsers but need fall backs for older ones - For example the inArray() and each() functions.
• Multi-browser (not to be confused with cross-browser) support.

Further information on learning center areas you can visit here Learn the basic building blocks of jQuery and Learning Center

So I hope I have addressed all your needs on MUST TO HAVE and under NICE TO HAVE I could agree with shallow learning curve of using jQuery JavaScript library

Answer 3

Ember.js may be a framework that fits your needs. I haven't used Ember too extensively myself, but am familiar with it from some open-source projects that utilize it.

Wikipedia's introduction to Ember summarizes the framework nicely: "Ember.js is an open-source client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state."

Here are a few relevant features based on your listed requirements:

• Free, open-source JavaScript framework using an MIT License
• Strong community with great tutorials and documentation. Not quite as popular as Angular, but still very mainstream.
• Bindings in Ember can be used with any object, not just between views and models. Two-way bindings can easily be created by using a computed alias which specifies the path to another object.
• Powerful MVC. The wiki page gives a short introduction to Ember's approach for routes, models, views, and controllers.
• Strong data connectivity features.
• Builds on jQuery and uses Handlebars.js for templates
• For data visualization (like charts, graphs, etc.), check out this blog and this one about using Ember with D3.js.

Since you're familiar with AngularJS, this blog may also be helpful, as it describes some of the differences between Angular and Ember.

Overall, it sounds like Ember may fit your needs nicely!