Writing fast and powerful Javascript applications
In this article we'll talk about some of the most important javascript frameworks and libraries, which we commonly use in our projects, and how to use them in order to build a powerful app.
Javascript is an interpreted prototype-based programming language. It was initially designed for interractivity on websites and creating web applications, but nowadays javascript is also used on server side, game development and desktop applications.
Javascript is the only (realistic) programming language that runs in users's browser, and it's supported by all browsers.
There are quite a lot of javascript libraries and frameworks which make writing javascript easier.
Many developers say that you should write pure javascript, in order to learn the language. I partially agree with this. You should write pure javascript until a specific point, when you think you can handle the language. Then use libraries/frameworks. Remember that a good developer is a lazy one, because it always searches for the simpliest solution to do something, and simple is better.
You don't need to reinvent the wheel. Use other's people work (who probably wrote it better than you would). Save time and do more with less code.
Next, we're going to make a summary for each commonly used javascript technology.
As many statistics show, jQuery is by far the most used javascript library. It is fast, cross browser, powerful and lightweight (even lighter since version 2.0, as they removed IE 6,7 and 8 support). Javascript is fun. jQuery adds extra fun. Manipulating DOM's, handling events and communicating with backend has never been easier. jQuery is also very extensible. Building a plugin based on jQuery is quite easy, but it depends on it's complexity. A smart guy said once that there are as many javascript/jQuery plugins as developers. He may actually be right.
As many statistics show, jQuery is by far the most used javascript library. It is fast, cross browser, powerful and lightweight (even lighter since version 2.0, as they removed IE 6,7 and 8 support). Javascript is fun. jQuery adds extra fun. Manipulating DOM's, handling events and communicating with backend has never been easier. jQuery is also very extensible. Building a plugin based on jQuery is quite easy, but it depends on it's complexity. A smart guy said once that there are as many javascript/jQuery plugins as developers. He may actually be right.
Backbone.js is a framework which provides structure for data models with key-value bindings, views, with a rich set of collection functions. All this structure is connected to a RESTful json API. Another cool feature of backbone is the backbone router which handles dynamic links and html5 history API.
This framework ment to be used when building web applications (not websites).
Backbone.js is a framework which provides structure for data models with key-value bindings, views, with a rich set of collection functions. All this structure is connected to a RESTful json API. Another cool feature of backbone is the backbone router which handles dynamic links and html5 history API.
This framework ment to be used when building web applications (not websites).
CoffeeScript is a very small language which compiles into javascript. The syntax is python-like, which is awesome. If you are a python developer, you will find coffeescript extremely intuitive and easy to use. There are tools where you can convert javascript into coffeescript, if you want to see how your code looks like written in coffeescript.
CoffeeScript is a very small language which compiles into javascript. The syntax is python-like, which is awesome. If you are a python developer, you will find coffeescript extremely intuitive and easy to use. There are tools where you can convert javascript into coffeescript, if you want to see how your code looks like written in coffeescript.
jQuery UI is a javascript UI framework (built on jQuery of course) which combines a set of effects, widgets, themes, and other user interaction elements. Here are a few examples of what jQuery UI can do: accordion, autocomplete, datepicker, tabs, slider, tooltips and much more. It's also themable. You can choose from existing themes, or build your own with their online theme builder. The main disadvantage is that jQuery UI can become slow at some point. It depends on how much you are polling out of it.
jQuery UI is a javascript UI framework (built on jQuery of course) which combines a set of effects, widgets, themes, and other user interaction elements. Here are a few examples of what jQuery UI can do: accordion, autocomplete, datepicker, tabs, slider, tooltips and much more. It's also themable. You can choose from existing themes, or build your own with their online theme builder. The main disadvantage is that jQuery UI can become slow at some point. It depends on how much you are polling out of it.
Here's our favorite part, Bootstrap. So many good things to write about it, We don't know where to start from. Bootstrap is THE framework for fast and easy front-end web development. Whether you need to make a responsive website, an interactive web app, or just a classic website, twitter bootstrap can come handy in any situation. Here are some key features that involve javascript:
Here's our favorite part, Bootstrap. So many good things to write about it, We don't know where to start from. Bootstrap is THE framework for fast and easy front-end web development. Whether you need to make a responsive website, an interactive web app, or just a classic website, twitter bootstrap can come handy in any situation. Here are some key features that involve javascript:
- Navigation
- Modal
- Tabs
- Carousel
- Scrollspy
- Tooltips
- and much more ...
A lot of features, but still very light. It's light because it uses CSS3 at it's best. They also dropped support for older versions of IE in bootstrap 3.0, so it became even lighter. Once you start using twitter bootstrap, it's impossible not to fall in love with it.
In a future article, we will compare twitter bootstrap and jquery UI.
Even if HTML5 is supported only by the major browsers, it is recommended to use it. HTML 5 is the future.
Why should you use it?
Even if HTML5 is supported only by the major browsers, it is recommended to use it. HTML 5 is the future.
Why should you use it?
- History API
- Geolocation
- Video/Audio support
- Local storage (better than cookies)
Most of there features are used via javascript. Things get simplier with HTML5, and the code gets cleaner too.
For more details about HTML5 check out this article.
All the above technologies were (and are) used in our either small or major projects. However, javascript is evolving quite fast, and we're always open to use new technologies.
Next, we'll present just a small overview on how we used javascript in some projects.
Netplayer is a platform that enables a video/audio chat between random people over the internet, or between friends.
The javascript technology set used for netplayer is quite big.
The most important ones are:
- Backbone (data managemet, routing, forms)
- CoffeeScript
- NodeJs (backend) + socket.io
- express js (for node)
- Facebook javascript SDK
- Underscore
As you can see, Loovea has a lightweight, fast interface. From the above libraries, we only used jquery and underscorejs.
Why's that? Because great speed was a requirement, and in order to satisfy this requirement we avoided using pre-built plugins, since they are complex, extensible, with multiple functionalities which we didn't need.
A few examples of plugins that have been implemented for loovea: autocomplete/geocomplete, infinite scroll, modal windows, ajax forms, and other.
Loovea also uses html5 features like history API and geolocation.
Qualsyst is built on bootstrap. Its forms are used at maximum power, but also the navigation bar with dropdown menus, buttons, etc.
The software industry is evolving quite fast, so in order to keep up, we're doing our best to stay up to date with the latest technologies.
For out next projects, we intend to use at least these technologies:
- Angular JS
- ExtJs
- Ember
Drawing a line, we can say that javascript is an awesome programming language, very fast, fun, and flexible.
There is a bunch of libraries/frameworks to choose from but we cannot say that there is a "best framework" or anything like that. Choose whatever fits best for your project.