Best JavaScript Frameworks To Build Your Next App

Looking to build a new feature-rich JavaScript app? These days websites are full applications that run in the browser, and you’ll need a solid foundation to build them on. In this article we’ll compare some of the most popular JavaScript frameworks and give some examples of sites that use them.

React.js

React is the most popular JavaScript library that is not a UI framework (e.g. Bootstrap, Angular). It has been developed by Facebook and it has a relatively small amount of developers, but has become the standard library for building large-scale frontend web applications. It provides a declarative component-based approach and is based on an event-driven rendering system, meaning that state changes will be rerendered, and events such as clicks will also cause the view to update.

It’s easy to use: The whole library is built around two concepts: “Components” and “Events”

A Component is a class that wraps a set of functionality and accepts data from parent components (it is a “pure” component)

An Event is a way to communicate between components: for example, click, onChange, etc… (it is a “bound” component)

With React, components are reusable. You can also use reusable components inside a component that is your main application. The reason behind this is to avoid the need to write “rendering” code multiple times.

Some sites that use React include the dating site Fling and Reddit.

Preact

Preact is the successor of React and is an open-source JavaScript library that allows you to use declarative, unopinionated, and easy-to-use libraries to build modern user interfaces. It has been inspired by React.

Preact provides a declarative component-based approach, but it is more powerful than React and is optimized to be performant, particularly on mobile.

Some sites that use Preact include Groupon and Uber.

Vue.js

Vue is an opinionated JavaScript framework that allows you to use reactive, unopinionated, easy-to-use libraries to build modern user interfaces. It is also known as “the JavaScript framework for power users”, which is very fitting, because it offers a number of features and benefits.

It’s easy to use, it only has one file that is included in the page, and you can also add as much or as little code as you want (like Vue.js does, with “vue” and “data”).

It provides a simple and easy way to add data to the app using data-v- attributes.

Some sites that use Vue.js include 9gag and Gitlab.

Backbone.js

Backbone is one of the first JavaScript libraries that was created to help develop mobile apps. It was created by Backbone.js and Twitter. It provides an easy way to create single-page applications. It provides a clean interface for creating models, views, and collections.

The collections that are built are models that help to group models together. Models have a lot of features that are really useful to have in a modern app. You can add views and models to views and models using the “model.setView(view)”. You can also add more views to the same view. This is all provided by the model and the view. Also, views have a view.el property, which is a reference to the view’s container.

Some sites that use Backbone.js include Quora, Twitter, and Tumblr.

Angular 2

Angular 2 is an open-source JavaScript framework. It’s a successor to Angular 1. It was built to improve the performance, modularity, and maintainability of Angular 1. It’s easy to use and it makes you focus on writing good code and not worry about the framework. Angular 2 uses TypeScript, which is a superset of JavaScript. It’s a statically typed language, meaning that variables have a fixed type and you can’t assign random things to it. TypeScript also has strict null checking.

Some sites that use Angular 2 include Medium and Facebook.

Which framework is right for you?

All frameworks have advantages and disadvantages. If you’re planning to build a single page application or are a seasoned developer who already uses a JavaScript framework, it’s not as hard to choose a framework. For newbie developers, we recommend the framework that makes them more comfortable.

We also suggest that you try a couple of frameworks, as it’s easy to get stuck in a certain paradigm.

If you are building a single-page application or you are a seasoned developer, React seems to be the right framework for you. If you are building a React site, we recommend you try React and Redux together.

I have always used Angular 1 for all of my projects. I was going to use React for one project recently but have a concern that it would be difficult to maintain in the long run. I use Angular 2 for everything else. Ultimately, all of the major JavaScript libraries are a good choice, and you should just pick one and get started. Let us know your favorite JS framework in the comments!

Event.Behavior Natural language event programming for Prototype

Introduction

This library is inspired by Adam McCrea’s MetaProgramming Javascript Presentation. It is mainly an experiment in meta-programming, I intend to apply the research towards a more practical extension to Prototype at some point in the future.

In Action

with(Event.Behavior){      set_style(styles).on(paragraphs).when(selects).change();  }  

Size Color Weight Font

By changing any of the select boxes above, the styles on these paragraphs will change.

The code above is real, and if you read on, you’ll learn why it works.

Starting Simple

with(Event.Behavior){      show('state_field').when('country').is('United States');      show('province_field').when('country').is('Canada');  }  

Country State

Basic Sentance Construction

The basic rule is: one verb construct, followed by when(), followed by at least one event or condition. If no events are specified, changes() is implicit.

VerbsNounsEventsConditions
show(element)when(element)changes()is(value)
hide(element) loses_focus()is_not(value)
add_class_name(class_name).on(element) gains_focus()contains(value)
remove_class_name(class_name).on(element) is_clicked() 
set_class_name(class_name).on(element) is_double_clicked() 
set_style(styles).on(element) key_pressed() 
remove(element)   
update(element)._with(content)   
replace(element)._with(content)   
call(function)   

You can use any of the constructs in any of the columns above to construct a sentance. Below is a simpler version of the font picker.

with(Event.Behavior){      add_class_name('black').to('paragraph').when('color_select').is('black');      add_class_name('red').to('paragraph').when('color_select').is('red');      add_class_name('green').to('paragraph').when('color_select').is('green');      add_class_name('blue').to('paragraph').when('color_select').is('blue');      add_class_name('bold').to('paragraph').when('weight_select').is('bold');      add_class_name('normal').to('paragraph').when('weight_select').is('normal');  }  

Color Weight

When you change one of the selects above, the styles of this paragraph will change.

Construcing Sentances With Functions

The above example describes what is actually happening very well, but it won’t scale as we add selects and paragraphs. To accommodate this, virtually very word can accept a function instead of a scalar argument. The table below shows the return type from any functions you define.

VerbsNounsEventsConditions
show(array)when(array)changes()is(boolean)
hide(array) loses_focus()is_not(boolean)
add_class_name(string).on(array) gains_focus()contains(boolean)
remove_class_name(string).on(array) is_clicked()
set_class_name(string).on(array) is_double_clicked() 
set_style(hash).on(array) key_pressed() 
remove(array)   
update(array)._with(string)   
replace(array)._with(string)   
call(null)   

Note that call() always expects a function, and will call it. The function you pass in doesn’t need to return anything.

To demonstrate the construction of sentances with functions, the full code behind the example at the top of the page was:

function selects(){      return $$('#font_picker select');  }    function paragraphs(){      return $$('#font_picker p');  }    //this builds a hash of styles that we can pass to Element.setStyle()  function styles(){      return selects().inject({},function(styles,select){          styles[select.readAttribute('name').camelize()] = select.value;          return styles;      });  }      with(Event.Behavior){      set_style(styles).on(paragraphs).when(selects).change();  }  

and(), or() – Multiple Events & Conditions

with(Event.Behavior){      show('postal_code_field').when('country_select').is('United States').or('Canada');  }  

Country Postal Code

You can join together multiple events and conditions using and(), or(). Verbs cannot be chained together, use call() for complex functionality. When joining together conditions and(), or() also act as the last condition you specified. The following are just some ideas:

  • call(function).when(element).is(‘a’).or().is(‘b’)
  • call(function).when(element).is(‘a’).or(‘b’).and().is_not(‘c’)
  • call(function).when(element).changes().and().is(‘red’)
  • remove_class_name(class_name).from(element).when(other_element).is_clicked().or().is_double_clicked()

Method Aliases

To help make things look a little more natural, several methods are aliased. Public methods that contain multiple words exist in both camelCased and under_score form.

  • includecontains
  • includescontains
  • areis
  • are_notis_not
  • changechanges

A few methods require two words to construct the verb portion of the sentence, “set_class_name(name).on(element)” for example. The following are all interchangeable:

  • to
  • from
  • on
  • of
  • _with

So add_class_name(class_name).to(element) and remove_class_name(class_name).from(element) both work.

Connecting Custom Objects & Classes – Add Your Own Verbs

The example below uses Control.Tabs, Object.Event. Below a tabs instance is linked up to a select box, and visa versa. Although the example given is fairly verbose and complex, in practical usage, much of the code is highly reusable. Tab Select

I am tab one. I belong to group one.

var tabs = new Control.Tabs('tabs');    function active_tab(){      return $('tab_select').value;  }    function set_tab_select(){      $A($('tab_select').options).each(function(option,i){          if(option.value == tabs.activeContainer.id)              $('tab_select').options.selectedIndex = i;      });  }    Object.extend(Control.Tabs.prototype,{      getValue: function(){          return this.activeContainer.id;      }  });    //mimic the DOM 'change' event  Control.Tabs.observe('afterChange',function(tabs){      tabs.notify('change');  });    Event.Behavior.addVerbs({      setActiveTab: function(tabs,tab){          return tabs.setActiveTab((typeof(tab) == 'function' ? tab() : tab));      }  });    with(Event.Behavior){      set_active_tab(active_tab).on(tabs).when('tab_select').changes();      call(set_tab_select).when(tabs).change();  }  

Adding Custom Events

Event.Behavior.addEvents({      isReset: 'reset' //available as is_reset()  });  

Warehouse v1.1.5: SVN Blame, Simpler DNS Setupn

Warehouse v1.1.5 has dropped, bringing SVN Blame support and an option for simpler domain settings.

This should be a painless upgrade if you have the warehouse:upgrade task set up properly. Basically, just put this parallel to warehouse v1.1.4, make your necessary web server changes to use this version of warehouse, and restart.

Changes:

Svn Blame support (nice ajax toggle if you’re using Ultraviolet for syntax highlighting)
Ultraviolet theme selection
Support repositories as subdirectories instead of subdomains.
Small admin change: creating a repository gives the current user full permissions to the repository too.

The FAQ has been updated to reflect the changes. We’ll see you in the forums if you have problems.

I’d like to thank the Warehouse community for this release, especially the beta testers who helped squash a few remaining bugs in the last week. SVN Blame support probably wouldn’t even be possible without help using the ruby/svn bindings from a couple folks, so I really appreciate it.

Chad Chad said on January 8th

Looks awesome! It doesn’t seem to be highlighting my views though (.html.erb/.js.rjs/etc), something need to be updated for it to recognize the new extensions?
macournoyer macournoyer said on January 8th

nice! was waiting for the subdir layout

+1051.23 for Git support
rick rick said on January 8th

Are you using Ultraviolet? It uses textmate syntax files. Here’s a patch to add support to erb and builder files:

http://rafb.net/p/r181×349.txt
curl “http://rafb.net/p/r181x349.txt” | patch -p1
Chad Chad said on January 9th

Thanks Rick
MDK MDK said on January 11th

Git support would be totally awsome!

What’s next for Warehouse? Plugins are getting a rewrite to use Rails Engines, maybe some git support, and a couple surprises.
Discussion

Sorry, comments are closed for this article.
Subscribe to Tumblelog and Articles.

Braindump Admidst Important Presentations on Rubinius, RSpec, and Adhearsion

Boy, it has been a busy couple of weeks. We’ve been cruising in silent mode for a bit, while attending RubyConf 2007 and finding a place to live. Here are a few things swirling around in my head that haven’t made it to a blog post yet…

RubyConf was great. It’s amazing how much the community has grown since 2005 (the conference attendance has doubled at least), yet it still managed to keep a good noncommercial vibe. I’d have to say though, my favorite topic of the weekend was the Treetop parsing framework. I never did any real programming like writing a lisp compiler or anything, so this is a whole new world for me.

There were some great presentations on Rubinius, RSpec, and Adhearsion as well. So interesting, in fact, that we’ve decided to sponsor the projects with Lighthouse accounts. Things are running smoothly for the most part, so we’re trying to get more involved in the open source community where we can. I’d like to make this more of a regular thing in the future, but that’ll probably have to wait until 2008 when we’re all settled in our new homes.

Another interesting note is that the Defensio spam service has finally gone public. We’ve been testing their service on Lighthouse against Akismet, as some of you may already know. I’ll have to run the numbers again and see what the results are. We have been experimenting with a spam interface in Lighthouse actually, and taking advantage of the various features Defensio provides to make it easier.
Discussion

Sam Smoot Sam Smoot said on November 10th

You think Warehouse might eventually support Git? I’m getting a little disillusioned with SVN loosing half my changes trying to merge back large branches, and peeps have been saying Git is the cure for what ails me so I’ve been considering switching.

BTW, good going on the support for Rubinius! 🙂
rick rick said on November 13th

I’d say there’s a good chance, though probably not for a little while unfortunately. There are still a lot more folks using SVN, and our focus is on keeping them happy. But at the same time, we’re also wanting to move to git internally…
Mason Mason said on December 4th

I would sing your praises if you supported git. And I might even sign up. 😉
Roy Roy said on December 6th

Can you please describe the main differnces between the old SVN and the new GIT.


How to format text in messages and tickets

Lighthouse are another partner tht uses Markdown for it’s default text formatting for Tickets, Pages, Milestone Goals and Messages inside your Account and Projects. Previously, Lighthouse only used a custom textile-like formatting which worked well for very basic formatting needs, but did not allow for specific features that were in high demand, such as nested lists.

The original textile-like formatting is still part of Lighthouse, we’ve just plugged a full set of Markdown to accompany it.
Link to a ticket

You can link to a ticket by simply referring to the ticket number, so by simply typing #43 will render a link to ticket #43 inside your current project.
Italic and Bold text:

italic and italic with both give you italic text

bold and bold with both give you bold text
Links

Lighthouse automatically will render links, so entering http://entp.com will spit out http://entp.com.

To create inline links using Markdown, you would simply use the following:

Lighthouse which will make a Lighthouse a link.
Code Blocks

By using @@@ wrappers around your code, you can create code blocks for posting code into your tickets.

@@@ javascript
var bar = function() {
// function code here
}
@@@

will render…

var bar = function() {
// function code here
}

Inline images

alt text

will render…

Evolution
Headers

To create a header, you just surround the text with # marks. The number of # marks will render the size of the header, so…

Header 1

Header 2

Header 3

will render…
Header 1
Header 2
Header 3
Ordered Lists

  1. This is the first item
  2. This is the second item
  3. This is the third item

will render…

This is the first item
This is the second item
This is the third item

Unordered Lists

  • This is the first item
  • This is the second item
  • This is the third item

will render…

This is the first item
This is the second item
This is the third item

Nested Lists

  • This is the first item
    • This is the second item
      • This is the third item
    • This is the fourth item
  • This is the fifth item

will render…

This is the first item
    This is the second item
        This is the third item
    This is the fourth item

This is the fifth item
    This is the first item
        This is the second item
        This is the third item
    This is the forth item

will render…

This is the first item
    This is the second item
    This is the third item
This is the forth item

Blockquotes

Email-style angle brackets
are used for blockquotes.

And, they can be nested.

Headers in blockquotes

  • You can quote a list.
  • Etc.

will render…

Code snippets

spans are delimited by backticks.

You can include literal backticks like this.
Preformatted Code Blocks

This is a normal paragraph.

This is a preformatted
code block.

will render…

This is a normal paragraph.

This is a preformatted
code block.

Horizontal Rules

By using any of those three indicators you will render…

a horizontal rule…

Tags: formatting, tickets
« How to search for Tickets In Lighthouse | Help | How do I send emails to Lighthouse? »

Rails Hosting in the Cloud On-demand deployment and management Partnership

Our Affiliate at Engine Yard Solon offers Rails Hosting in the Cloud
On-demand deployment and management of your Ruby on Rails application on Amazon EC2. You get Engine Yard’s battle-tested Ruby on Rails stack and Rails hosting deployment expertise in an easy-to-use interface for $129 per month minimum.
Sign up now! Find out more about Solo
Rails Focus

Our Rails Focus started in 2004. We’ve created apps, written books and spoken at conferences.
Over 70 People Worldwide

Our commitment to service is #1, with team members in the USA, Europe, Asia, and Australia.
Managed Rails Hosting & Rails Deployment
With the Number One Ruby on Rails Hosting Runtime Stack
Focus on writing your application and deploy it with the best runtime stack available.

Convenience – You write it, we run it. Focus on writing your application and leave deployment to Engine Yard.

Support – Live and at your service 24/7/365. Depend on our skilled staff of proven Ruby and Rails hosting experts.

Scalability – Scale from one to millions of users with our flexible Ruby on Rails hosting and deployment platform.

Reliability – We believe in redundancy and replication. We set up your slices from top to bottom, write your Capistrano recipes for you, and provide you with full SSH access.

Replicated MySQL and PostgreSQL
Redundant hardware stack
SAN storage
Tier 4, Class A data centers

Services – Purchase by the slice. Buy one and get a portion of Engine Yard’s business and technical resources.

See our plans
Blog
Custom Chef Recipes with Engine Yard Solo 23 February 2009

We just pushed a new release of Solo, our Ruby in the cloud platfor…
New Relic RPM Now Available with Solo! 5 February 2009

Here at Engine Yard we get a lot of positive feedback about our ser…
New Release of Engine Yard Solo 2 February 2009

We just pushed out a new release of Solo, our new Engine Yard on AW…
Partners
Lighthouse

Lighthouse is the perfect project management tool that puts simple issue tracking and bug tracking directly at your fingertips. It is perfect for development teams (or teams of any kind) and even has subversion integration.
Take a look at our other partners.
Customer Success Stories

Divvy

View all of our case studies.

Their knowledge of Rails and their quick responsiveness to our growth and code change has been beyond excellent.

Colin Curtin, Procore See what our customers have to say about us.
Upcoming Events
March

Proactive failure support and recovery
Integrated load balancing
Experienced Sys Admins and DBAs
Persistent storage
Automated backups
Resource monitoring

MountainWest RubyConf
March 13-14, 2009
Salt Lake City, Utah
CommunityOne
March 18-19, 2009
New York, New York

Resources

document Security Overview

Visit our document library for more resources.
Affiliate Program

Do you know someone who’s looking for top-notch Rails hosting? Engine Yard now has an Affiliate Program.