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!

LivePipe UI High-Quality Controls & Widgets for Prototype Programming

Introduction

LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible. MIT licensed and actively maintained.
Event Oriented Programming

introduces a mechanism to create and observe events on any object, not just DOM Elements. This is used by all controls, and allows for fine grained control of your user interface. Making use of this is as easy as:

var w = new Control.Window();  
w.observe('afterOpen',function(){  
    //insert your custom logic here  
});  

Control Examples

Tabs
Window
TextArea
SelectMultiple
Rating
ProgressBar
ScrollBar
ContextMenu

Control.ProgressBar is a percentage based progress bar that can be set to grow in one of three ways: on a timed interval, when events in your application tell it to, or it can be set to poll a given URL.

Extras

LivePipe UI also includes a small and growing collection of useful extras. Currently this list includes:

Event.Behavior
Cookie
HotKey

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()  });  

IE Overlay Height

In IE, the height of the overlay is set to the view height. If you scroll the page then you can see that the overlay does not cover all of it.

Solution: use the clientHeight instead.

At line 792 of window.js, simply plug in document.body.clientHeight. This does the trick.
Comments and changes to this ticket

niko
niko August 19th, 2008 @ 01:20 AM
    This works for me, too.
satoshi
satoshi August 26th, 2008 @ 01:48 AM

It occurred in IE7.you can see this condition at attached img.
    control_modal.jpg 45.8 KB


    → State changed from “unconfirmed” to “resolved”

There is another aspect of this problem that I am working on, but this is definitely the fix for IE, and I've incorporated the change. Thanks!
gordo11231
gordo11231 November 16th, 2008 @ 06:51 AM

This fix doesn't well work when the document is very short. (In IE 7 at least.) This seems better:

        positionOverlay: function(){
            var dimensions = document.viewport.getDimensions();
            Control.Overlay.container.setStyle({
                width: Math.max(
                            document.body.clientWidth,
                            dimensions.width) + 'px',
                height: Math.max(document.body.clientHeight,
                            dimensions.height) + 'px'
            });
        }

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.