JavaScript: One programming language to rule them all

Now, we can use JavaScript to create Desktop & Mobile App, Web server, also the Internet of those things.

In this story, I’m going to tell you about many interesting JavaScript framework that can help you build application in almost every digital platforms you know.

And If you started to explore in detail about each framework I told here. the Summary at the end will included with a lot of useful link you use.

I wrote this story to conclude what JavaScript framework I learned, used, and teach people in 2015, but a bunch of frameworks still out there. If you’ve your favourite ones, tell me in the comment. I’d love to.

1. The Dark Age has gone (so far)

First, let start with the history, the 1st age of JavaScript.

From the beginning, JavaScript targeted to make HTML more dynamically. But in that time, It’s quite hard to write it good. According to the complex of its syntax, structure, and tools in the past.

But that’s a good history. With a lot of pain in the past, great developers have invent and create many things to ensure the history will not be repeated again.

Now, the Golden Age of Framework & Open source

I’ve passed the time that everyone coded independently and faced problem in the room alone. But finally, someone got an idea that we can keep ‘most-used’ code to reused them later.

and the D.R.Y (Don’t repeat yourself) concept make them great.

With idea and concept, we got them as ‘framework’.

Especially, they shared it, as ‘open source’ framework.

Let take a look on a great one.

JQuery

Make HTML more dynamically, one line of JQuery at a time.

There’re a lot of JavaScript frameworks around there. But in web-based era, it should be JQuery that reigns the throne.

Skipped all head-ache and ‘pull my hair off’ error with cross-browser problem, go straight to make HTML dynamically as people need. You’ll found it’s a pleasure to create interactive website you need with JQuery.

Designed to boost developer’s productivity, everything can be done within one line of code, at least.

$('selector').doSomething(withThis);

So everyone who love to make web more interactive, love JQuery. At this time I found my web designer’s friend also enjoy using JQuery to make their design amazing.

But that is, JQuery comes to help people use JavaScript easier and faster. It is not different from in ancestor in result.

Finally, we come to face new challenge that people need from web.

Now, the web, becomes an application.

Angular JS

JavaScript framework that birthed to fullfil web application

If JQuery is a JavaScript framework that aimed to make HTML more dynamic, it has succeed in Website’s Interactive.

But for application (yes, I mean any application that built on web technology), the framework that specially aimed to manage form and data on the web, as the king, should be Angular.

I don’t mention here that JQuery cannot be used to create web application, but its objective doesn’t planned to do that.

In the time that JQuery is rising, Web developer use server stack to manage data from client (web application) to database, then take them back to show to user.

JQuery can implement those needs, but you need to take care a lot of parts with yourself, especially on user interface.

Angular JS, in the other hand, provides seamless method to done the same thing like JQuery can, but in less effort, more flexible, and more component-alike. It also support testing, which ensure JavaScript you have, will still work in more complex system.

In result, Angular gives a lot of opportunities to developers (did I already mention Front-end one?) to make web application at ease. So they can spend time for other things.

In the same time that Angular & other framework are rising up to make client-based web application more pleasure to work with. (I called this era as the 2nd age of JavaScript) There’s something more powerful also rising outside the web territory.

Yes, How could not we talk about Node JS?

JavaScript is not for only web anymore

Welcome to the 3rd age of JavaScript, and it isn’t in the web browser only.

Node JS

Node JS make JavaScript run everywhere!

Naturally, JavaScript borned for web. It has been designed to be run within Web Browser (Remeber that IE?).

But would it be great if the JavaScript we coded to make web application, also work in other platform?

I called this the 3rd age of JavaScript: the time that JavaScript doesn’t need to run on Web Browser anymore.

With Node JS installed on a computer. JavaScript can be executed & act as a native programming computer, similar to Java that required Java Runtime (JRE). So Node JS has made a mark to bring web developer to new frontier.

You can done a lot of things with JavaScript & Node JS, included create the whole web server, from web client to database, with MEAN Stack.

MEAN Stack composed from multiple technologies: MongoDB, Express JS, Angular JS, and Node JS. If you can use them to build the web application, which resulted in you just code about HTML, CSS, and JavaScript.

Also, with the great contribution of open source communities, there’re also a lot of framework based on Node JS that change the world of web forever.

Because it’s about mobile application.

The Rise of Mobile era

We cannot denied that the number of people who have smart phone and tablet, is outnumbered people have skills to use computer.

So the world is going crazy about mobile application and also faded web application out of spotlight (for now). And yes, it seems easier to make money from mobile application than web application.

What’s about us? The people who lived in time that everyone asked for web-based application, now facing that if we need to create mobile application, we need to learn from zero, especially the programming language that is not same for each platform.

But Web is open and free, and wherever we have open & free, we always have more than one choice: Frameworks that provide method to create mobile application with web technology.

PhoneGap & Cordova

How to make a mobile application with web technology: use it as User Interface (and may be all of them).

PhoneGap provides Native application wrapper that will wrap HTML, CSS, & JavaScript, and use it as Application’s User Interface, and also access to native’s API, such as Camera and Touch ID (yes, we used it via JavaScript’s function)

That is, we called it as ‘Hybrid’, bacause it isn’t the absolute web application or native mobile application.

Then Adobe system purchased Nitobi (Creator of PhoneGap) in 2011, then make it as open-sourced project in new name: Apache Cordova.

So it’s quite open for us to create mobile application that works cross platform with HTML, CSS, and JavaScript. You’re free to choose your Web Framework, such as Angular or JQuery Mobile.

Now Cordova has been used in many web-to-mobile solutions, such as PhoneGap Build, Cocoon JS, Telerik, and Visual Studio.

That started another fun.

Ionic Framework

Faster and smoother Hybrid mobile application solution

If you use Apache Cordova, you need to search for a User Interface framework that’s good for your needs.

But you’ll find out that you just need a ready-to-use Cordova framework which provides a high performance User Interface, solid JavaScript framework, and rapid workflow to convert your web project into mobile application. Ionic framework aimed to be that one.

Ionic framework combines 3 good parts: High performance Web User Interface, Angular JS, and Cordova. I also love the concept of tools and their vision. For example, you can save a lot of your free time to create many icon files with one line of command.

While I’m writing this story, Ionic team is moving to their 2nd version of framework and launching the beta of their online tool: Ionic platform.

With Ionic platform, it provides us a lot for tools that can help you out from many technical problem, such as

  • How can I implement Push notification? (It’s Ionic Push)
  • How can I rapid prototype mobile application’s UI? (It’s Ionic Creator)

In the other hand, Onsen UI and Sencha are the other frameworks in this field I encouraged to to check them out.

React

Image from Addthis.com
Faster Dynamic HTML Rendering & Component-based, finally come to JavaScript

While others frameworks’re prioritizing to manipulate HTML structure. React is taking that manipulation to the next level.

React introduces JSX, the new way to craft HTML & JavaScript into one source file, the component.

Resulted in faster dynamic HTML render and easier to manage the Web UI in a source file.

However, if you’re going to use React in your project, whether web, mobile, or desktop. You need to keep in mind: React aims to be a view (or UI, if you’re familiar).

You need other work to bring data to work with your React component. Flux is a good one.

React Native

Think about React JS, but for Native Mobile application

From my experience, React Native is a big leap for React JS.

With the same idea, React Native is brining Native mobile component into JavaScript’s control.

React Native started with iOS platform first. It allows web developer to create Native iOS UI, and control them with JavaScript. The result is amazing. Because the UI is real native, nothing about HTML, and we can still manage data with JavaScript.

That brought an overwhelm interest from web developers. Even current version is 0.15, it got 20,000+ stars and 400+ contributors on GitHub.

Current version supported iOS and Andriod. There’s an interesting idea that we can bring React Native to wearable device’s territory, such as, Apple Watch.

NativeScript

Create mobile application natively, with JavaScript

NativeScript, founded Telerik, is another open source framework that give ability to create mobile application as Native one, not Hybrid.

With well defined UI structures and ability to access a lot of Native platofrm’s API. I think it’s a good choice for choosing between PhoneGap, Ionic, and React Native.

NativeScript showed up in the second half of 2015, So I am planning to looking to try it in this month.

Electron

Web become desktop application.

Even we’ve told that the time of PC era has coming to its end. I was writing this story on a PC. :)

It has a good reason that people is going to buy more mobile devices for their life. But I think we still need a lot of productivities that we can found on PC only.

So how about we build an application for PC, not just for Mac and Windows, but for Linux too!

Electron is a framework that is similar to PhoneGap’s concept. It’ll wrap HTML, CSS, and JavaScript into native application. So you can design and develop your desktop application with same web’s skill.

Did I mention it’s free & open source?

Cylon JS

Hey, JavaScript can control that things!

I realised that we have a lot of IT gadget things than before.

Internet of Things, is going to give billion dollars opportunities to people who create wonderful things. But if you are web developer, Cylon JS is a good start.

Cylon JS is another framework that built on Node JS. The founder planned to make JavaScript a programming language that can control hardwares and devices.

You may heard about Arduino. You may using Raspberry Pi to make a wonderful thing, same to me.

But if we can use JavaScript instead to learn new programming language, it must be great, right?

Let’s sum them up!

Those’re JavaScript frameworks I learned, used, and teach in 2015. So let’s see them here again. I also put the link to their website, if you want to see more detail:

  1. JQuery Make HTML more dynyamic without headache
  2. JQuery Mobile JQuery comes with Mobile’s UI framework
  3. Angular JS JavaScript framework for web application
  4. Node JS JavaScript is working without Web browser!
  5. MEAN JavaScript technologies that stacked up for web application
  6. Meteor Another easy MEAN Stack’s solution
  7. React JS Faster and more component-based for JavaScript
  8. React Native React JS for create Native mobile application
  9. NativeScript Another framework for create Native mobile application, included Windows Phone
  10. Electron Make desktop application with JavaScript
  11. Cylon JS JavaScript for Internet of Things

Hope you enjoy technology as I do. We’re going to 2016 and I excited the new things that are coming to make our live easier.

I wrote this story to conclude what JavaScript framework I learned, used, and teach people in 2015, but a bunch of frameworks still out there. If you’ve your favourite ones, tell me in the comment. I’d love to.