Full Stack Developer

(IT432)

Anju Mishra
Department of Information Technology

1
Outline

 Development Span
 Web Application Architecture
 Types of Apps
 Web Application Frameworks
 Choosing a Framework
 Q &A

2
Web Application Architecture

3
Client-Side vs Server-Side Rendering
Server-Side Rendering Client-Side Rendering

Pros: 1. Websites are easy to crawl which means 1. Rich site interactions
better SEO (Search Engine Optimization) 2. After the initial load, the website is very
2. Initial page load is faster. fast
3. Great for static sites where you don’t 3. Great for web applications.
have dynamic content

Cons: 1. Low SEO if not implemented correctly.

4
Client-Side vs Server-Side Rendering

https://www.bloomreach.com/

5
Client-Side vs Server-Side Rendering

https://www.bloomreach.com/

6
Client-Side vs Server-Side Rendering

https://www.bloomreach.com/

7
Client-Side vs Server-Side Rendering

https://www.bloomreach.com/

8
How does Google handle JavaScript rendering today?

9
Good Web Application Architecture
 Security: If the source code is not protected, the web app can be
vulnerable. This increases the risk of malicious code manipulation.

 Scalability: Make sure that your architecture can be scaled horizontally,

 Separation of concerns: The application should be modular, self-

10
Development Span

11
1. Framework
A framework is a tool that
provide a method to build and
run web application
 Server Side Framework
 Django-Python
 Express.js – JavaScript
 Ruby on rails
 ASP.NET
 ClientSide Framework
 Angular
 React
 Bootstrap

12
Web App as a MVC

13
Ruby on the Rails
 Ruby on the Rails is a powerful web application framework
that is open-source, completely free to use, and collaborative.
 The language that’s used within this framework is Ruby,
which is a high-level and dynamic programming language
that focuses on productivity and simplicity.
 One can develop an application at least ten times faster with
Rails than a typical Java framework. Moreover, Rails includes
everything needed to create a database-driven web
application, using the Model-View-Controller pattern. Language: Ruby
Latest Version: Rails
• GroupOn , UrbanDictionary 5.0.0.beta2
• AirBnb , Shopify, Github Framework Link:
http://rubyonrails.org
Github Link:
https://github.com/rails/rails

14
Django
 Django is a reputable framework that is open-
source and uses Python as a programming
language.
 The Django web application framework is fast,
highly secure, and versatile.
 The framework is notably multifaceted because it
automatically takes care of site maps, content Language: Python
Latest Version: Django 1.9.2
administration, and user authentication. Framework Link:
• Pinterest https://www.djangoproject.co
m
• Instagram Github Link:
• Quora https://github.com/django/djan
go
• Disqus
15
Angular (previously Angular JS)
 Originally known as Angular JS, Angular is a
fantastic framework that was created by Google.
 This framework can be used by developers for
the creation of large scale and high performance
applications.
 Among the most notable features of Angular is
that it was built to be used for cross-platform
applications. Language: JavaScript
• Netflix Latest Version: Angular 7.1.5
Framework Link: https://angular.io/
• Forbes website Github Link:
• Google Marketing Platform https://github.com/angular/angula
r
• Google Digital Garage
16
ASP.NET
 ASP.NET is a framework developed by
Microsoft, which helps us to build robust web
applications for PC, as well as mobile devices.
 It is a high performance and lightweight
framework for building Web Applications
using .NET.
 All in all, a framework with Power, Productivity,
and Speed Language: C#
Latest Version: ASP.NET 5
• GettyImages (ASP.NET Core 1.0)
• TacoBell Framework Link:
• StackOverflow http://www.asp.net/

17
METEOR
 Meteor or MeteorJS is another framework that
gives one a radically simpler way to build
realtime mobile and web apps.
 It allows for rapid prototyping and produces
cross-platform (Web, Android, iOS) code.
 Its cloud platform, Galaxy, greatly simplifies
deployment, scaling, and monitoring. Language: JavaScript
• HaggleMate Latest Version: Meteor 1.2.1
• WishPool Framework Link:
https://www.meteor.com/
• Telescope Github Link:
https://github.com/meteor/me
teor

18
Laravel
 Laravel is a framework created by Taylor Otwell
in 2011 and like all other modern frameworks, it
also follows the MVC architectural pattern.
 Laravel values Elegance, Simplicity, and
Readability.
 One can right away start learning and developing
Laravel with Laracasts which has hundreds of
tutorials in it. Language: PHP
Latest Version: Laravel 5.2
• Deltanet Travel Framework Link:
• Neighbourhood Lender https://laravel.com/
Github Link:
https://github.com/laravel/laravel

19
Express
 Express or Expressjs is a minimal and flexible
framework that provides a robust set of features
for web and mobile applications.
 It is relatively minimal meaning many features
are available as plugins.
 Express facilitates the rapid development of
Node.js based Web applications. Express is also
one major component of the MEAN software Language: JavaScript
bundle. Framework Link:
http://expressjs.com/
• Storify, Myspace Github Link:
• LearnBoost https://github.com/strongloop/expr
ess

20
Spring
 Spring, developed by Pivotal Software, is the
most popular application development
framework for enterprise Java.
 Myriads of developers around the globe use
Spring to create high performance and robust
Web apps.
 Spring helps in creating simple, portable, fast, Language: Java
and flexible JVM-based systems and Latest Version: Spring 4.3.0
Framework Link:
applications. http://projects.spring.io/spring-fra
• Mascus mework/
Github Link:
• Allocine https://github.com/spring-projects/
spring-framework

21
PLAY
 Play is one of the modern web application
framework written in Java and Scala.
 It follows the MVC architecture and aims to
optimize developer productivity by using
convention over configuration, hot code
reloading, and display of errors in the browser.
 Play quotes itself as “The High-Velocity Web Language: Scala and Java
Framework”.. Latest Version: Play 2.4.6
Framework Link:
• LinkedIn https://www.playframework.co
• Coursera m/
Github Link:
• LendUpe https://github.com/playframew
ork/playframework
22
CodeIgniter
 CodeIgniter, developed by EllisLab, is a famous
web application framework to build dynamic
websites.
 It is loosely based on MVC architecture since
Controller classes are necessary but models and
views are optional.
 CodeIgnitor promises with exceptional Language: PHP
performance, nearly zero-configuration, and no Latest Version: CodeIgnitor
large-scale monolithic libraries. 3.0.4
Framework Link:
• Bufferapp https://codeigniter.com/
• The Mail Github Link:
https://github.com/EllisLab/C
• Guardian odeIgniter
23
React.js
 ReactJS is an open-source, component-based
front end library responsible only for the view
layer of the application. It is maintained by
Facebook.
 React uses a declarative paradigm that makes it
easier to reason about your application and aims
to be both efficient and flexible.
Language: Java Script
 React is not a framework. It is just a library Latest Version: 16.13.1
developed by Facebook to solve some problems Framework Link:
https://reactjs.org/
that we were facing earlier. Github Link:
• Facebook , WhatsApp https://facebook.github.io/reac
t/
• Instagram
• New York Times 24
Choosing A Web Dev Framework
1. Usage Context 9. Included JS Library
2. License 10. Unit Testing
3. Software Pattern 11. Scaling
4. Hosting Requirements 12. Documentation
5. Ease of Installation 13. The Community
6. Learning Curve 14. Bug Fixes/ Updates
7. Core Library 15. Ease of Creating an Extension and
8. DB Abstraction and ORM Availability

25
Types of Apps

26
Q&A
 Differentiate between Client side and server-side rendering?

 Explain factors for good web application architecture?

 Discuss various frameworks used in application development?

 How to choose a web development framework?

27