Mastering in Frontend : Getting Into Concepts - Part 1

Table of contents

Reading Time: 5 minutes

Okay so now you have decided to delve into frontend technologies or just wanted to have a look what these confusing things are, Frustrated ?? don’t be, life is easy, until you do not have girlfriend, EXCEPTIONAL if you have good one (a myth). 😉

So as the backend technologies are getting change / improve day by day, same is happening with frontend ones. Lots of Javascripts’ libraries/frameworks, many of them we get to hear even first time, thats why we get confuse with their names and usage.

In this blog i will not bring you to the topics’ definition directly, but i will explain them whenever the reason of knowing those things would occur, by this way you would be having a reason to know them, one of my favourate mentor says “Don’t study things untill you do not need them, because they will come and go, read them when you are really in need” I like It 😉

Here is the Index of this blog, that we’ll cover.

Introduction
Frameworks, Libraries & Wrapper
Design Patterns : MVC, MVVM.
Topics :
- AngularJs
- JQuery
- PaperJs
- BackboneJs
- ReactJs
- BoneJs
- KnockoutJs
Performance Comparision : AngularJs vs ReactJs vs KnockoutJs vs Raw
Code sample compare : Javascript, JQuery, BackboneJs, ReactJs
Resources & References

So What?, Why?, How?, If?, Else? Where? == All Mess.

And you leave yourself with answers for all ??? like:
I will get to know whenever find reason to get into it.
I just wanted to focus on some, other are all mess.
I’m expert in what i’m using i don’t need other.

So what are these technologies all about, like AngularJs, JQuery, BackboneJs, Javascript, ReactJs, Underscore, PaperJs, KnockoutJs, BoneJs.

I am not going to dive deep [because it may again leave with confusion], but at the end you will get all “???” resolved.

Ok Soldier !! so, without checking whatsapp messages lets get a quick overview, you may take a coffee / paper+pen or tilt your brows if you wanna show serious to your neighbour.(it make them confuse)

So First start with the basic and overall introduction to all these Frameworks/Libraries/Wrappers.

wait wait what i just said, Frameworks…Libraries…wrapper – don’t worry starting from here,

So,

Wrapper :

A wrapper is way of repackaging a function or set of functions (related or not) to achieve one or more of the following goals (probably incomplete):

Simplifies an interface to a technology
Reduces/eliminates repetitive tasks
Increases application flexibility through abstraction
Are often re-usable regardless of high level design considerations
Simplification of use
Consistency in interface
Enhancement of core functionality
Collecting discrete processes into a logical association (an object)

*In Terms of Software Engineering

A wrapper pattern is a class with a special interface that allows incompatible classes to work together.

Two classes may not be able to perform a data transfer due to the presence of incompatible data access points.

For example, if a class accepts a date in DD/MM/YY format from another class that generates a date in MM/DD/YYYY format, neither of the classes can coexist to operate as an integrated module because their data formats are different.

The wrapper class solves this problem by converting the data into a compatible format.

-This definition was written in the context of Software Engineering.

Framework & Library :

The key difference between a library and a framework is “Inversion of Control”. When you call a method from a library, you are in control. But with a framework, the control is inverted: the framework calls you.

A library is just a collection of class definitions. The reason behind is simply code reuse, i.e. get the code that has already been written by other developers. The classes and methods normally define specific operations in a domain specific area. For example, there are some libraries of mathematics which can let developer just call the function without redo the implementation of how an algorithm works.

In framework, all the control flow is already there, and there’s a bunch of predefined white spots that you should fill out with your code. A framework is normally more complex. It defines a skeleton where the application defines its own features to fill out the skeleton. In this way, your code will be called by the framework when appropriately. The benefit is that developers do not need to worry about if a design is good or not, but just about implementing domain specific functions.

Overall

A library performs specific, well-defined operations.

A framework is a skeleton where the application defines the “meat” of the operation by filling out the skeleton. The skeleton still has code to link up the parts but the most important work is done by the application.

Examples of libraries: Network protocols, compression, image manipulation, string utilities, regular expression evaluation, math. Operations are self-contained, Jquery.

Examples of frameworks: Web application system, Plug-in manager, GUI system. The framework defines the concept but the application defines the fundamental functionality that end-users care about. BackBone, Angular.

1. How to make a Java library?
2. How to design a framework?

Now Start understanding the overall concept about them :

AngularJs:

Miško Hevery, a Google employee, started to work with AngularJS in 2009.

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write.

AngularJS is perfect for Single Page Applications (SPAs).

AngularJs is MVVM (Model View ViewModel) here ViewModel works like Controller.

Now, the question is what is MVVM, so its a design pattern, now what is design pattern, Here it is:

Design Pattern (with reference to AngularJs): is nothing but a maintainable and reusable way of writing code which can be applied to commonly occurring problems. There are numerous design patterns such as MVC, MVVM, DI etc. It depends upon the problem that which design pattern needs to be followed.

WHY ? AngularJs is MVVM not MVC (Model View Controller) ?

In the above snippet, our text is represented by “sampleText” variable. This is our model. Controller is updating the view by displaying the data on the view by replacing “{{sampleText}}” with sampleText variable value. It is the controller that is managing the relationship between our model and the view which is the HTML.

In MVC if we make any change in the the view it doesn’t gets updated in model. But in AngularJS, we have heard that there is something called 2-way binding and this 2-way binding enables MVVM design pattern

FACT:

Controller is actually replaced by View Model in MMVM design pattern. View Model is nothing but a JavaScript function which is again like a controller and is responsible for maintaining relationship between view and model, but the difference here is, if we update anything in view, it gets updated in model, change anything in model, it shows up in view, which is what we call 2-way binding.