Tech Talk on 11th of August 2020 - Selecting the Best Javascript Web Framework #Javascript #Framework #React #Angular #Vue #Express #Next

1. HELLO!
I am Rajitha Pathiraja
I’m a Certified Cloud Developer with 3 Years of
enterprise development experience. Mostly with
Javascript Frameworks
You can find me at rajithapathiraja.xyz
1

2. Selecting the Best
Javascript Web
Framework


3. 3
WHY JavaScript ?

4. 4
What
is a Framework ?

5. Developers often use the terms
“library” and “framework”
interchangeably. But there is a
difference.

6. Difference Between a Framework and a
Library
› Framework
› A framework inverts the
control of the program. It tells
the developer what they need
› The Technical Difference
› The technical difference between a framework and library lies in a term
called inversion of control.
› Library
› The programmer calls the
library where and when they
need it.

7. Aspects to Consideration When
Selecting a Framework
Factors that can help you make an intelligent choice
› Available for Learning Resources
› Popularity
› Core Features
› Usability
› Ease of Integration
› Speed
› Productivity and Performance
› Development Cost
› Track Records

8. Available for Learning Resources
Creating an awesome framework is one thing
and communicating the core ideas behind it
is different
Even if you read a great book or course, there
is a chance you’ll learn something new by
exposing yourself to different resources
this strategy won’t work if you are limited
with your options
Aspects to Consideration When Selecting a Framework

9. Popularity
If a framework is not so popular, it
means there are a few developers who
specialize in it.
What happens if you find yourself stuck
with some problem and there are isn’t
really a community that you can ask for
help?
You can determine the popularity of a
framework by quickly looking at how
well the project is doing on GitHub and
other places
Aspects to Consideration When Selecting a Framework

10. Core Features
Scan through the documentation.
You need to get a sense of what
this framework is about in general.
Is it a view layer only, fully fledged,
or something in between
Here is a summary of the core
features of the four frameworks
Aspects to Consideration When Selecting a Framework

11. Usability
The best way to get a feel for a
framework is to use it in some mini
project. This gives you an opportunity to
solve everyday problems mentioned
above with a given framework.
Aspects to Consideration When Selecting a Framework

12. Ease of Integration
If you try to integrate libraries and
spend hours on it every time,
maybe that’s not the optimal
choice.
Aspects to Consideration When Selecting a Framework

13. Speed
It’s important to plan ahead on timing,
and when it comes to planning, do
check the ‘quantity of code’ that the
particular framework will make you
write.
Apart from quantity, also check the
‘complexity of the code’ that the team
of developers will have to write as
complexity is also directly
proportional to the time to market.
Aspects to Consideration When Selecting a Framework
There are many frameworks that
will work perfectly well when it
comes to “quick time to market”,
but always answer the question:
will it satisfy the most important
user criterion—performance?

14. Productivity and Performance
Most of the top JavaScript
frameworks perform reasonably well
and if you glance over a few statistics
from case studies, you will find that
even above average performance
gains can result in a big boost to vital
business metrics—time on site,
conversion rate, etc.
Aspects to Consideration When Selecting a Framework
Development Cost
The team of developers and
their cost
The maintenance cost of the
web app
More case studies on Productivity and Performance in Web Frameworks - https://wpostats.com/

15. Track Records
A new framework always takes birth to solve an existing problem
in the web app development world
This new JS framework turns out to be a magic wand for you,
helping you solve your problem in a couple of days, which earlier
took months to crack.
However, within a few months of the release of this new
framework, you find yourself shackled into other problems
Aspects to Consideration When Selecting a Framework

16. 16
JavaScript Frameworks for
Front-End Development

17. React
› JSX
› JSX (JavaScript XML) is a React extension that makes it
easy for web developers to modify their DOM by using
simple, HTML-style code
› Virtual DOM
› The Virtual DOM is a copy of the website’s DOM, and
ReactJS uses this copy to see what parts of the actual
DOM need to change when an event happens (like a user
clicking a button).
› This kind of selective updating takes less computing
power and less loading time

18. Angular
› Some of the core features of AngularJS are as
follows
› Data-binding − You don’t need to write special code to bind
data to the HTML controls. This can be done by Angular by
just adding a few snippets of code.
› MVC — The framework is built on the famous concept of MVC
(Model-View-Controller). This is a design pattern used in most
of the modern-day web applications. This pattern is based on
splitting the business logic layer, the data layer, and
presentation layer into separate sections.
› Writing less code — When carrying out DOM manipulation a
lot of JavaScript was required to be written to design any
application. But with Angular, you will be amazed by the
lesser amount of code you need to write for DOM
manipulation.
› Unit Testing ready — The designers at Google not only
developed Angular but also developed a testing framework
called “Karma” which helps in designing unit tests for
AngularJS applications.

19. Vue JS
› The concept of VueJS has been taken from Angular and React, but
VueJS is better in many ways. It’s a lightweight framework with
features such as two way data binding and virtual DOM
› VueJS has rapidly gained popularity in the programming community
due to some key features.
› Clear separation of templates,
› CSS code and JavaScript code has offered a great convenience for
the developers
› VueJS is said to have one of the simplest and detailed documentation
when compared to other JavaScript frameworks
› The main disadvantage of using VueJS is that it has no reputed
company backing it up and hence, it’s not popular as ReactJS and
Angular which are backed up two giants.

20. Preact
› These are some of the goals Preact plans on delivering
› Performance: Render quickly & efficiently.
› Size: Small size, lightweight (approximately 3.5kb).
› Efficiency: Effective memory usage (avoiding GC thrash).
› Understandability: Understanding the codebase should take no more than a few
hours.
› Compatibility: Preact aims to be largely compatible with the React API.
› Preact is a comparatively new JavaScript
framework which describes itself as a
“Fast 3kB alternative to React with the
same modern API”

21. A look at JavaScript Frameworks Comparison

22. 22
JavaScript Frameworks for
Backend-End Development

23. Express JS
› Pros of using Express.js
› Express is one of the oldest frameworks and
hence it has a massive community backing up.
Express is said to have more than 1.5k
contributors on Github
› Express has well-written documentation with
plenty of tutorials and resources
› Express provides fast-paced development using
Node.js
› Express offers seamless connectivity with all
major popular databases like MongoDB, MySQL,
and Redis
› All popular template engines like Pug, HAML,
EJS, are compatible with Express
› Express is undoubtedly one of the easiest
backend frameworks for newbie developers to
learn thanks to simple syntax and structure
› Cons of using Express.js
› Express doesn’t offer any security solutions and
therefore ensuring the security of the program
is entirely up to the developer himself
› The structure of Express has somewhat rigid.
There isn’t a defined structured way of doing
things to guide beginners. This is a
disadvantage for beginners, but a fortune for
experienced developers

24. Next JS
› Pros of using Next
› Popular tools such as React, Material-UI,
Builder, Sanity, and DatoCMS are compatible to
be integrated with Next.js
› Automatic server-side rendering and code
splitting
› Next.js allows us to create dynamic meta tags in
the head section to optimise SEO and hence
delivers an excellent SEO performance
› Hot-reloading is available with Next.js —
automatically reloads the page when a change is
detected
› Cons of using Next
› Performance benchmarks of Next.js are in most
cases inferior to its competitors
› Next.js is built specifically to work with React
only

25. Nuxt JS
› Pros of using Nuxt
› Setting up a new project in Nuxt is pretty fast
and convenient thanks to the starter template
and command line
› One of the biggest advantages that Nuxt.js
offers is the ability to create Universal Apps —
JavaScript code that runs on both client and
server-side
› Nuxt automatically organizes your code in a
logical manner. The main directories set up by
default are — assets, components, layouts,
pages, plugins and store
› “Nuxt community” is a GitHub collection of
several APIs, libraries, starter kits and modules
that can be very beneficial for developers
› Cons of using Nuxt
› Integrating custom libraries with Nuxt is
complicated
› Documentation and resources are kind of scarce
when compared to other frameworks
› Debugging can be quite frustrating when using
Nuxt

26. Gatsby JS
› Pros of using Gatsby
› Websites built with Gatsby.js are usually faster
than normal websites built with other
frameworks
› Static content generated by Gatsby.js is easily
readable by Search engine crawlers and offers
no hindrance like other JavaScript frameworks
› Gatsby offers implicit security as it does not
require any server, database or dependencies
› Gatsby’s rich and extensive plugin architecture
will offer you a plugin for every task that you
can hope to accomplish
› Cons of using Gatsby
› Gatsby.js is not an ideal solution for
content-heavy enterprise-scale websites like
e-commerce stores or media extensive websites.
Build time will drastically increase as the size of
content grows
› Although learning how to use Gatsby is fairly
easy, a prerequisite knowledge of React and a
little GraphQl is necessary

27. As history has shown, Javascript will continue to remain
dominant in the programming community.
Because of this, new JS frameworks are constantly
introduced into the community with the effect of making it
challenging for developers to choose the best JavaScript
framework for your requirement out of dozens of options
available.
Every framework is unique and has its own strengths and
weaknesses. Therefore as a developer, you should carefully
analyze and understand the project requirements so that you
can cross off the majority of your available choices

28. Bonus - Micro Frontends
28
The term Micro
Frontends extends
the concepts of
microservices to the
frontend world.
With Micro Frontends
we can think about a
website or web app
as a composition of
features which are
owned and
developed by
independent teams.
Each team develop
its features
independently.
Thats means also
using different
technology stacks if
the teams prefer.
Team A - works on featured movies (Using Angular)
Team B - works on the movies list (using React)
Team C - works on the profile page (using Vue.js)
Team D - works on the movies search feature (using Javascript/jQuery)

29. THANKS!
Any questions?
You can find me at:
rajithayasasroid@gmail.com
29