Week 10 - Client-side framework

Framework

A common problem with large JavaScript web application is that they can become messy really quickly. The lack of structure makes the code hard to maintain. Frameworks can help with this by providing structure to organize the code and increase maintainability.

In computer programming, a software framework is an abstraction in which software providing generic functionality can be selectively changed by additional user-written code, thus providing application-specific software. A software framework is a universal, reusable software environment that provides particular functionality as part of a larger software platform to facilitate development of software applications, products and solutions. Software frameworks may include support programs, compilers, code libraries, tool sets, and application programming interfaces (APIs) that bring together all the different components to enable development of a project or system. (Definition from Wikipedia)

A JavaScript framework is a web application framework that makes it easier and faster to produce JavaScript that is compatible with multiple browsers and devices. Frameworks speed up development by providing preconfigured libraries. Ajax and other functionalities are handled by the framework so developers can concentrate on the logic of an application. There are currently a number of JavaScript frameworks that attempt to offer similar benefits, they are of most benefit to medium- or large-sized applications. Smaller applications should be properly structured too but such applications are not as likely to require the rigid underpinnings and formal structure of a medium- or large-sized application.
Design Patterns

A design pattern is a documented solution to a recurring problem that programmers have identified, usually in a particular context. Design patterns propose a well-thought-out and generally accepted approach that developers might want to consider adopting. They do not give the code needed to solve a given problem but will give a way to approach the problem.

Application development requires collaboration from multiple developers which mean that writing maintainable and reusable code becomes important. Design patterns can help developers to do this. So a design pattern is a reusable solution that can be applied to commonly occurring problems in software design.

Client-side MVC frameworks become useful when apps start operate not only with HTML but with external data. Most JavaScript framework follow the MVC architectural pattern or variations of MV*

MVC (model-view-controller)

MVVM (model-view-view model)

MVP (model-view-presenter)

Patterns are used to represent some of the best practices adapted by experienced object-oriented software developers. They describe

the problem

the solution

when to apply the solution

consequences.

also give implementation hints and examples.
Model View Controller (MVC) pattern

MVC pattern is an architectural pattern describes at a high level how to organize and structure applications. There are three major parts to the MVC pattern:

the model

the view

and the controller

Model : The model represents the underlying, logical structure of data in a software application. The model is where application data is stored. The model does not need to know anything about views and controllers. When a model changes, it will typically notify its observers that a change has occurred. It’s a common mistake to think of the model as the database behind and application but it is better to view the model as the body of code that represents the data.

View : A view is the body of code that represents the user interface (all of the things that the user can see and to which the user can respond on the screen, such as buttons, dialog boxes, and so on). An application generally has multiple views, and each view often represents some portion of the model. Views are what presented to the users and what allow users to interact with the system. The view for a website is typically created using HTML, CSS, JavaScript and often templates. The view has access to the DOM.

Controller: is the intermediary for the view and the model. It keeps the model and the view separated so that the data and layout/interface have no direct knowledge of each other. This is a common design in software engineering and term used to describe it is decoupling. Software that has been built around this principle tends to have distinct parts, each of which looks after a particular concern. Organizing applications in this manner promotes a principle known as Separation of Concerns. MVC is a great way of achieving this Separation of Concern. The controller updates the view when the model changes. It also adds event listeners to the view and updates the model when the user manipulates the view.

Client-side MVC frameworks become useful when apps start operate not only with HTML but with external data. In the last few years, a series of JavaScript MV* frameworks have been developed, such as backbone.js, ember.js, AngularJS.
Advantages of MVC

MVC framework allow developers to add a new format to an application relatively easily. It is possible to start off with a standard HTML-based set of views and then later add a new set of views supporting a totally different format, such as Silverlight, Flex or a native mobile front end.

This benefit exists because of the application of the principle of Separation of Concerns.

view is in no way exclusively tied to the model

easy to treat it as a distinct component that we can swap out

There are also benefits with regard to the methodologies and processes a team can use. For example, Test-Driven Development (TDD) leads to applications that are much easier to test and continue to test as the application matures. Without achieving a Separation of Concerns, it can become much trickier to set up good tests.

Framework vs traditional HTML

e.g. traditional HTML

the model and controller talk to the server to create new views.

e.g. AngularJS

the model and controller are handled by the browser.

delivers new pages to a user without interacting with the server.

enables the building of reusable View Components

provides a services framework to allow easily backend-frontend server communication.
Model

A model can be as simple as an array
```
var employees = ['Christopher Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
```
The employees variable is simply a hard-coded array of employee names.

In the real world, this array would usually be populated from a data store of some kind

an SQL database

an API

View

The view is concerned with presentation. It often represents the presentation of data from the model

Number of Employees: {{ ourEmployees.length}}

basically just HTML and an expression

Controller

At a basic level this is the code which links the model from the data to the way that it is displayed
```
function MyFirstCtrl($scope) { 
// populate the employees variable with some model data 
var employees = ['Christopher Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant']; 
// Now put this model data into the scope so it can be used
//in the view 
$scope.ourEmployees = employees; 
}
```
In this example

the model data is assigned to the ourEmployees property that we set on this $scope object.

the $scope object was supplied to the controller function by the AngularJS framework

all that is the required to populate it with the data that is to be made available to the view
Libraries vs Framework

JavaScript framework differ from JavaScript library in that a library offers multiple predefined functions that a developer can call to improve and expand their application, whereas a framework describes the structure of the application and gives the developer a way to organize their code

Library

A collection of helper methods

Helps not to “reinvent the wheel”

Enables greater consistency, readability

Abstracts away repetitive code

Framework

Implies architecture / structure

Often driven by patterns considered to be "best practice," i.e. MVC

Designed to save time by employing reasonable defaults ("convention over configuration")

Comparison

Libraries can be more open-ended and expressive

Libraries allow developers to learn the API as needed

Frameworks require holistic understanding

Frameworks bring structure to large amounts of code

Frameworks have key distinguishing features that separate them from normal libraries:

Inversion of Control (IoC) : With libraries, the code is accessed by programmers through a software program’s programming interface. Frameworks, however, carry out an inversion of control: the code is embedded in fixed structures and called up when needed. You can say that libraries are called up by programs, whereas frameworks make specifications to the program.

Extensibility: A user can extend the framework - usually by selective overriding; or programmers can add specialized user code to provide specific functionality.

Non-modifiable framework code: The framework code, in general, is not supposed to be modified, while accepting user-implemented extensions. In other words, users can extend the framework, but should not modify its code.
AngularJS

AngularJS is an MVC-type framework. It offers two-way data binding between models and views. This data binding allows for an automatic update on both sides whenever there is a data change.

A client-side framework, AngularJS incorporates user interface data binding. The data binding is bidirectional: whenever the model changes, the view is automatically updated. In turn, the model updates if the view is changed. The HTML is compiled in the browser and is rendered in the live view on the fly.

This contrasts with the traditional HTML programming setup, where the model and controller talk to the server to create new views. With AngularJS, the model and controller are handled by the browser. In other words, you can deliver new pages to a user without interacting with the server.

It enables the building of reusable View Components. It provides a services framework to allow easily backend-frontend server communication.

AngularJS is one of the most popular frameworks. Strengths include a high-performance, easy-to-test, native GUI, robust libraries and server-side rendering. Weaknesses include poor documentation AngularJS could be considered when building a complex web front-end application and a single modular framework to handle everything is required

Backbone.js

Backbone.js is a simple framework that fits into a single JavaScript file. It is popular with teams looking for a simple structure for small web applications without bringing in a large framework like AngularJS or EmberJS. Backbone.js uses models and views along with routing .The Models allow for key-value binding and events for handling data changes. Models (and Collections) can connect to RESTful APIs. The Views have declarative event handling, and the Router handles URL and state management.

Very lightweight, it relies on UnderscoreJS and jQuery for library elements. It is ideal for creating single-page web apps and synchronizing disparate elements of web applications that have clients.

Backbone.js is also good at maintaining clean code. Also, because Backbone uses event-driven communication, it provides control over every change in a view. Backbone events sit on top of DOM events, making it easy to tie views together and thereby providing excellent extensibility and versatility.

A wide variety of web apps have been created with Backbone. They include Airbnb, Foursquare, Hulu, and USAToday.com. Backbone could be considered when developing simple web applications.
EmberJS

EmberJS is an application framework which works with the model-view-controller arrangement. It enables developers to build highly scalable, single-page apps by utilizing its two-way data binding, templates that update automatically, rich object model, computed properties and router for handling application state.

EmberJS is positioned as a framework for big projects. For example, Ghost is a blogging platform that is taking on WordPress at its own game. Similarly, Discourse is a reimagining of online forums. Both projects are built with Ember. Other sites using Ember include Groupon, Nordstrom, Vine and Live Nation.

Ember’s strengths include high-performance, excellent documentation, server-side rendering, and tooling on the command line. Its weaknesses include a smaller community than other frameworks and its awkwardness when going outside its initial scope.

ReactJS

ReactJS focuses on providing views .With ReactJS, data views are rendered automatically as HTML. This gives developers a system where data flows down, and subcomponents cannot alter enclosing modules. React is useful for creating single-page applications because it creates distinct separations between components on the page – the HTML is updated cleanly and efficiently when the data is changed.

Now open source, it is maintained by Facebook and a group of corporations and programmers. ReactJS can be found on sites such as Bleacher Report, SeatGeek, Feedly, Imgur, HelloSign, and Netflix. It is one of the top ten most “starred” JavaScript projects on GitHub as of May 2016, and one of Facebook’s premier open-source projects.

ReactJS is lightweight, and some don’t even consider it a full framework. It is ideal for rendering UI components and is often used with Flux, an application architecture used to create client-side web apps. This is different from the Model-View-Controller dynamic. It sends actions to the model layer from the view layer. It does not have the capability of talking to the server, adding dependencies or validating models.

React was built by Facebook to help them create more consistency in their user interface. It was an immediate hit because of its high performance and ability to render on the server. These are benefits both Ember and Angular are working to improve. React’s strengths include its simplicity, server-side rendering, native GUI and high performance. On the downside, it takes a little while to understand Flux.

Weaknesses of framework

The training period required for a developer to familiarise themselves with the code can be significant, even for people with a good existing knowledge of HTML, CSS. It is necessary to adapt projects to the conceptual approach of the framework in order to achieve the desired end result. Framework (and templates) provide detailed documentation on the individual components but developers need to spend time familiarising themselves with this and with the development approach imposed by the framework.

Frameworks typically load more code for a project than is actually required – unless care is taken to optimise it specifically

Another drawback of framework is the licensing. Although the Creative Commons Attribution 2.0 licence allows the use of framework both privately and commercially free of charge, the prerequisite may be that it may be necessary to refer to the framework in your site. If a developer wants to publish a project under a different licence, it is often necessary to use one of the paid licence models (Project, General, OEM, etc.).