Benchmarking front-end UI Technologies

1. June 21, 2017 www.snipe.co.in 1
Prepared :Snipe Team

2. 2
User Interface Technologies

3. June 21, 2017 3
Agenda
•User Interface Overview
•Design principles of UI
•JavaScript
•JQuery
•Angular JS
•Dojo
•Node.js
•AJAX

4. June 21, 2017 4
Agenda
The user interface
•A Web service is a method of communication between two electronic
devices over a network.
•System users often judge a system by its interface rather than its
functionality.
•Poor user interface design is the reason why so many software
systems are never used.

5. June 21, 2017 5
Agenda
User interface design principles
•User familiarity
•Consistency
•User diversity
•User guidance
•Minimal surprise
•Recoverability

6. June 21, 2017 6
UI Technologies
JavaScript Introduction
•JavaScript is one of the most simple, versatile and effective languages
used to extend functionality in websites.
•JavaScript is the programming language of HTML and the Web.
•It is used to create interactive websites.
•It is open cross-platform.
•Client side JavaScript is the most common form of the language.

7. June 21, 2017 7
UI Technologies
Advantages and disadvantages of JavaScript
Advantages :
•JavaScript is executed on the client side.
•JavaScript is a relatively easy language.
•JavaScript is relatively fast to the end user.
•Extended functionality to web pages.
•Increased interactivity
Disadvantages:
•Security Issues
•JavaScript rendering varies
•Client-side JavaScript does not allow the reading or writing of files.

8. June 21, 2017 8
UI Technologies
JQuery
•JQuery is a type of Javascript library (Prototype, Ext Core) designed to
make Javascript more accessible and easy to use.
•JQuery simplifies the Javascript syntax and relatively provides better
interaction between Javascript and other web development languages.
•Important features
•Event handling
•AJAX Support
•Animations
•Lightweight

9. June 21, 2017 9
UI Technologies
Advantages and disadvantages of jQuery
Advantages
•Ease of use
•Large library
•Strong open source community.
•Great documentation and tutorials
•Ajax support
Disadvantages
•Functionality maybe limited
•JQuery JavaScript file require

10. June 21, 2017 10
UI Technologies
• AngularJS
• It is a is an open-source web application framework and by a community of
individual developers and corporations to address many of the challenges
encountered in developing Single-Page Applications.
• AngularJS is built on the belief that declarative programming should be
used to create user interfaces and connect software components,
while imperative programming is better suited to defining an
application's business logic.
• AngularJS is open source, completely free, and used by thousands of
developers around the world.

11. June 21, 2017 11
UI Technologies
Features
•AngularJS is a powerful JavaScript based development framework to create RICH
Internet Application(RIA).
•Provides developers options to write client side application in a clean MVC(Model
View Controller) way.
•It is a framework to build large scale and high performance web application while
keeping them as easy-to-maintain.
Core Features
•Data-binding
•Scope
•Controller
•Services
•Filters
•Directives

12. June 21, 2017 12
UI Technologies
Advantages and disadvantages of AngularJS
Advantages :
• AngularJS Allows Developers to Express UI Declaratively and Reduce Side
Effects.
• AngularJS Gives Developers Controls.
• AngularJS Supports Single Page Applications.
• AngularJS Enables Massively Parallel Development.
Disadvantages :
• Angular is big and complicated.
• Not Secure
• Not degradable

13. June 21, 2017 13
UI Technologies
• Node.js
• Node.js is an open source, cross-platform runtime environment for
server-side and networking applications.
• Node.js allows the creation of web servers and networking tools,
using JavaScript and a collection of "modules" that handle various
core functionality.
• Modules handle file system I/O, networking, binary data,
cryptography functions, data streams, other core functions.
• Cross-platform Runtime Environment for server-side and networking
applications.

14. June 21, 2017 14
UI Technologies
• Features of Node.js
• Asynchronous and Event Driven
• Very fast
• Single threaded but highly scalable
• No buffering
• License
• Where to Use Node.js?
• Following are the areas where Node.js is proving itself a perfect technology partner.
• I/O bound Applications
• Data Streaming Applications
• Data Intensive Realtime Applications (DIRT)
• JSON APIs based Applications
• Single Page Applications

15. June 21, 2017 15
UI Technologies
Advantages :
• You Already Know JavaScript
• It's Fast
• Real-time Made Easy
• Streaming data
• One Codebase And Your Real-time For Free
Disadvantages :
• Single-Threaded : single-threaded means that one does not need to care about
the problems of synchronizing between threads.
• Bad concurrency primitives
• Lack of maturity : Most of the core libraries have reached the status of stable,
and you can trust them to usually do the right thing.

16. June 21, 2017 16
UI Technologies
Dojo
•Dojo is a JavaScript framework targeting the many needs of
large-scale client-side web development.
•For example : Dojo abstracts the differences among diverse
browsers to provide APIs that will work on all of them.

17. June 21, 2017 17
UI Technologies
Dojo
•Dojo is a JavaScript framework targeting the many needs of
large-scale client-side web development.
•For example : Dojo abstracts the differences among diverse
browsers to provide APIs that will work on all of them.

18. June 21, 2017 18
UI Technologies
Advantages :
• Community: Dojo is an open community. As a result many individuals and companies have
been able to come together on a level playing field to build tools that benefit everyone.
• Performance: Dojo is used on high-profile, high-traffic sites every day and Dojo’s
build tools are a key reason why.
• Quality: Infrastructure for internationalization and accessibility is woven through the
entire fabric of Dojo.
Disadvantages :
• Dojo can be perceived as heavy or bloated because it ships with features in its
core that are only useful for making web applications.

19. June 21, 2017 19
UI Technologies
AJAX
•AJAX is an acronym for Asynchronous JavaScript and XML. It is a
group of inter-related technologies like javascript, dom, xml, html, css
etc.
•AJAX allows you to send and receive data asynchronously without
reloading the web page. So it is fast.
•AJAX allows you to send only important information to the server not
the entire page. So only valuable data from the client side is routed to
the server side. It makes your application interactive and faster.

20. June 21, 2017 20
UI Technologies
• Advantages
• Better interactivity
• Easier navigation
• Compact
• Disadvantages
• The back and refresh button are rendered useless
• It is built on JavaScript

21. Comparison
JavaScript JQuery Angular JS Dojo Node.js
security Less Very less Very less High Very low
Ease to use Relatively
easy
Very easy Easy Relatively
easy
Real time
made easy
Open
source
Yes yes yes yes yes
improve web
functionality
yes Yes Yes Yes Yes
Dependency Independent Dependent
on
JavaScript
dependent independent Dependent
on
JavaScript

22. Conclusion
• There are many UI technologies in market like JSF,CSS.
• Based on requirement one can select the technology.
• As per analysis JavaScript is the efficient technology.
June 21, 2017 22