It was quite simple to figure out UI in web development few years ago. Simply we created HTML page which was cross browser compatible with some effort and pages were generated on the server and sent to the different browser for rendering. To make it dynamic some of the more modern applications were used like Ajax and JavaScript, but many pages worked with little or no JavaScript at all. For most of the developers JavaScript was not popular back then, and UI development was done mostly without that, as there were many issues associated with it.
In few cases where web-based applications required “rich” client-side functionality, Adobe Flash was used and later Silverlight to add animation, media services, that HTML, Cascading Style Sheets (CSS), and JavaScript couldn’t offer. The world of RIAs was in demand and looked extremely bright.
Technology has quickly changed
However, over the past 2 years, technology has quickly changed for web and there are lots of users who are more aware of internet and information available on it. It has also due to increase the number of various devices which ultimately requires an increase or the rise of HTML5 and JavaScript.
Some web developers like the change and few developers are reluctant as the changes or releases of version are very frequently. Regardless of which side one is, the change has gradually happened, and it has huge effect on the way web user interface are built. My focus here is to help reader to understand JavaScript usefulness in developing user interface by providing five benefits of new JavaScript approach over the traditional server-side development and then an overview of the current status in UI development and some popular framework/scripts that help us build robust user interface.
Benefits of developing UI in JavaScript
1. Fast and Responsive
Due to the increase in number of users the biggest problem in modern web development is network latency. Speed and performance now matters a lot, every byte moves it takes time which result in huge portion of page load time, and with new devices adding every day the problem is magnified.
With JavaScript development, the communication with server is minimum and fast. This is achieved by sending JSON (or sometimes XML) data to the client instead of sending a mix of data and mark-up HTML. For example, the Kendo UI chart can be changed from bar to line on user request without server interaction.
2. Front-End Platform for all
Any technology you use on the server be it ASP.net, PHP or any other, JavaScript and HTML5 can be used to provide a rich front-end. For example, ASP.NET may make certain front-end tasks “drag-and-drop easy,” but it may not be the best platform for raw service performance (too much overhead).
3. Any Devices
As there are too many devices and platforms for the plug-ins to ever achieve the necessary uniform distribution to be viable. Businesses need to rebuild an app 3 to 5 times just to make it accessible on devices. Sure, we can use server-side runtimes to produce HTML5 to target these platforms, but to package the server-produced HTML and “install” it on a mobile device we need JavaScript model.
4. Offline Support and App Stores
Today most significant aspect for website is to provide experiences that work all the time, with and without active connections to the Internet. This is why we pick JavaScript/ HTML5 development versus traditional server-side development, so as apps can be usable and responsive, even in the absence of an active Internet connection.
Front-ends technology like JavaScript, like those built with Kendo UI, can use locally cached data to draw and refresh the app till network connectivity is restored. And something like the Kendo UI Data Source will eventually help track changes to objects locally and move those changes to the server later.
Let’s see some details of JavaScript how it’s helpful in UI and what all framework or scripts are useful.
Rise of the Script (Libraries and Framework)
JavaScript has become center of web development, in response to the trend of client application functionality previously run on the server.
As applications move toward incorporating HTML5 technologies such as geo-location, canvas, web storage, web sockets, and others rely heavily on JavaScript. As a result, we have to ensure that JavaScript code is structured in a way that promotes reuse, test-ability, and simplified maintenance.
Like in old days randomly functions across one or more script files and pages is no longer an option as the amount of JavaScript code included in an application increases. It’s more important than ever for developers to study different patterns and techniques that can be used to structure code.
Now a day as web developers are writing more JavaScript code by hand from scratch or to simplify many script libraries and frameworks are used. It’s very important to understand the requirement first whether its UI development, widget development or a huge application which is required. Without access the requirement adding any library or framework can complicate and delay the development in oppose to simplify and speedup. Let’s now examine some of those scripts and how they’re being used for UI development.
UI Control Development Frameworks and Libraries
Case 1: Concerning website UI development with widgets, calendars, modals, sliders only
Then I suggest more of these type of libraries:
jQuery
jQuery is on top of all the script libraries, which has been around since 2006. According to builtwith.com website survey, usage of jQuery is nearly 59% of the top 10,000 sites. The number of website using jQuery is increasing an currently its reported in the built with that more than 24 million sites are using jQuery.
Statistics for websites using JavaScript technologies
The core of jQuery is the ability to easily select DOM elements, the length of code required is small compare to vanilla JavaScript. For example, if we have to find all li elements in divs with a “myClass” class on them, you can use the following jQuery selector:
var allTags = $('div.myClass li');
You can also attach events in a cross-browser manner using shortcut functions, as shown next. (You could also use bind(), on(), or other similar functions.)
allTags.click(function() {
var li = $(this); //grab clicked item
//do something!
});
There are script libraries based on jQuery, such as jQuery UI and jQuery Mobile. Here jQuery UI provide lots of functionality like to set widgets and effects to render dialog boxes, pop-up calendars, autocomplete and drag-and-drop. jQuery Mobile is a relatively new script library but it simplifies the coding of mobile-enabled websites that work well on many types of mobile devices.
jQuery UI Plugins
Statistics for websites using jQuery Plugin technologies
In addition to script libraries such as jQuery UI and jQuery Mobile, there are hundreds of jQuery plug-ins are also available that can be used to render grids, show charts , display images, play videos, and provide many other types of features. The large number of jQuery plug-ins plays a big part in jQuery’s overall popularity.
All of their libraries help us to solve portion of the UI but not all of it. Depending on what functionality we need, there are libraries and allow to achieve our needs.
YUI Library
(they also have advanced UI stuff): http://yuilibrary.com – YUI’s lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.
Kendo UI
http://www.kendoui.com – Kendo providing everything needed for modern, rich HTML5 app development in a single, compact package.
JsRender
https://github.com/BorisMoore/jsrender – JsRender, a replacement for jQuery Templates, allows client-side templating that can significantly reduce the amount of JavaScript code required to convert JSON data to HTML.
Vue.js
http://vuejs.org- Vue can easily be integrated with other frontend libraries. This makes it an extremely versatile tool and it’s easy to fix its shortcomings or missing features by just plugging in another library.
Case 2 – Frameworks for basic website development :
Statistics for websites using Framework technologies
Handlebars
http://handlebarsjs.com – Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
Dojo
http://dojotoolkit.org – Fast and scales with your development process. Provides everything you need to build a Web App. Language utilities, UI components, and more, all in one place, designed to work together perfectly.
YUI Library (their basic web dev stuff):
http://yuilibrary.com – It’s lightweight architecture make it scalable, fast, and robust. Built by Yahoo!, YUI powers the most popular websites in the world.
Bootstrap
http://twitter.github.com/bootst – Bootstrap provides UI components and interactions. Components are built with responsive design in mind, so that they adjust to different resolutions and devices.
HTML5 Boilerplate
http://html5boilerplate.com – To build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.
Case 3 – To build full-fledged, client-side, web applications:
Angular
https://angular.io – AngularJS is a framework that lets you “extend” HTML’s syntax to define data bindings, templates, and more.
React http://facebook.github.io/react – Since every single UI component is created independently in JavaScript, it becomes very easy to reuse them throughout your app without having to re-write them.
AmplifyJS
http://amplifyjs.com – AmplifyJS provides a unified API to access different types of data sources. For example, Ajax calls can be registered using AmplifyJS, then called throughout an application. Client-side components can also communicate using a pub/sub model.
Backbone.js
http://backbonejs.org – Backbone is a framework for building MVC-like JavaScript applications.
KnockoutJS
http://knockoutjs.com – Knockout provides built-in data-binding support, lets you write JavaScript code that follows the MVVM pattern, supports client-side templates, and more.
Underscore
http://underscorejs.org- Underscore provides many helpful utility functions for JavaScript, such as sorting arrays, grouping items, finding min and max values, and many others.
This list barely scratches the surface of what’s out there, especially given that I’ve handpicked only a few scripts. You can find a list of some of the more popular JavaScript files currently used in websites on BuiltWith’s JavaScript Libraries Growth page.
In addition to script libraries, RWD (Responsive web design) and CSS media queries requirement have also increased. As more devices with multiple resolutions and screen sizes are released the requirement for responsive website has increased. Today’s modern browsers support CSS media queries that can be used to target specific screen sizes. By using correct media queries, we can enable a website to look good in desktop browser, on mobile device, and on tablet. The following example shows a simple CSS media query to override CSS styles when a device is 320 pixels wide:
@media screen and (max-width:320px) {
/* override the styles here */
nav ul > li {
float: none;
}
}
Future of JavaScript UI development
In current scenario web development has changed considerably, where RIAs once dominated, HTML5 and JavaScript are now taking their place because of the enhanced functionality available in modern browsers and increasing availability of mobile devices and tablets. In addition, we’ve seen some associated advantages with the move to HTML5 and JavaScript, as well as several libraries, framework and technologies that can help support client-centric development.
We might think that HTML5 and JavaScript offer the answer to all web development needs going forward. Although in some case its right but in reality, its important than ever to use correct language, framework, and tool for the correct job. In most of the case we should access the need and see if the RIA framework or script will be appropriate to use.
Never the less, future looks bright for HTML5 and JavaScript; these technologies are definitely changing our approach towards UI development and code written for both desktop and the mobile web. If you’ve been playing wait game about learning JavaScript and related framework to use the client-side web development technologies, now is a great time to take a leap!
Author: Shweta Sinha
I’m exploring Angular and JavaScript Master Plus course at ADMEC Multimedia Institute one of the advanced web development institutes which provides high level JavaScript Training.
Thanks for reading my blog, I hope you’ve understand the importance of JavaScript for developing UI for web applications and websites. Leave your suggestions and views regarding this blog in below given comment area too.
Want to read more informative blogs from web development professionals on JavaScript then click on Our JavaScript Blogs.
