Website
VS
Web Application

Website

Informational in nature
(Blogs, News site, etc)

Web Application

A software program that runs in an Internet browser, on or through a web page

Similar to a software program that runs on a computer desktop or desktop application, a web application allows for user interaction and can be designed for a variety of uses

Web applications are usually created using a combination of
programming languages 
and
web application frameworks

What does a web application consist of?

OS

Database

Web Server

Server Side Code

Browser

Client Side
Code

How Web Apps Works

Multi Page Application (Traditional Web Apps)

• Perform most of the
  application logic on the server
• Each request sent to the server
  will render a new page
• Support legacy browser
• Could potentially work
  without javascript

Pros

• Plenty of resources, best practices, solutions and frameworks available
• SEO
• Easy development: Smaller technology stack
• Faster initial page load: Page is rendered on the server side -> sent to browser

Cons

• Slower to load pages.
• Mobile Development

Single Page Application
(Modern Web Apps)

• Perform most of UI logic in web browser
• Load a single web page
• Dynamically update the page
  as the user interacts with the app
• Provide native app like experience
  • No page reloads
  • No Extra wait time
• Asynchronous Javascript / XML (AJAX)

Pros

• Very reactive app
  (Close to desktop application)
• Reduce bandwidth usage
• Decoupled frontend and backend
• Mobile development is easier
• Fast: most resources (HTML + CSS  + Scripts) are only loaded once

Cons

• First page load is slower than MPA
• SEO is challenging (Content loaded by AJAX)
• Javascript is strictly required

CSS/UI Framework

• Help create stylized and professional looking web apps
• Grid System
• Color scheme
• Stylize HTML component using CSS
• Look clean and professional
• Usually there are within frontend framewok

Pros

• Faster development
• Responsive by default
• Browser compatibility
• Javascript widgets/plugin
• Documentation & Support

Cons

• Stop developer from learning CSS
• Less customization
• Many sites look the same
• Lots of overriding styles
• Many depend on Jquery for certain things

Bootstrap

• Very well known
• Built by Twitter
• Easy to learn
• Looks professional
• Can be difficult to
  customize components

Materialize

• Clean looking
• Lots of styling and color options
• Follow Google's Material
  style guide

Foundation

• Lots of example
• Professional looking

Semantic UI

• Lots built-in
• Built-in themes so its' customizable

Grommet

• Has a huge focus on accessibility
• Looks really clean
• Not as used as some of the others
• Made for ReactJS

Front-End Framework

• The part of end-user see and interact with
• Consist of web design and the interation of the site
  • CSS
  • HTML
  • JS
• In most cases, written in Javascript
• Organizing functionality and interactivity

Pros

• Less work for large
  frontend applications
• Organized, component based design
• Fast performance
  (virtual DOM)
• Reliable & Tested
• Community & Support
• Great for teams

Cons

• Add complexity for simple projects
• Can be too opinionated/less freedom
• Stop beginners from learning actual JS coding
• Updates can introduce issues

Vue.js

• Easy to learn
• Very fast
• All tools associated with
  it are packaged well
• Takes parts from Angular and React
  and optimizes them
• Less widely adopted than some others
• Flexible - Can use it in multiple ways

Angular 2+

• Build by Google
• Popular in enterprise
• Well Supported
• Encourages reusability
• Improves application scalability
• Large learning curve

React

• Build by Facebook
• Popular for startups
• Bundles frontend code into components
• Organizes code and data to
  make code reusable
• Large learning curve

Ember

• Gives a large amount of
  functionality out of the box
• Opinionated (Have to use its formatting)
• Steep learning curve

Back-End Framework

• Consist of server, db and
  code that interacts with them
• Consist of code that gives dynamic
  data to the frontend of the site
• Written in variety of programming
  ​language
  • Java
  • PHP
  • Python
  • Ruby
  • NodeJS
• Wide variety of features

Pros

• Save a TON of time
  and make things much easier
• Very flexible and allow you to build almost anything
• Built in security
• MVC
• Built in routing
• Community, Documentation & Support

Cons

• Can stop beginners from learning the fundamentals of coding
• Some frameworks can be too opinionated/less freedom

Spring

• Java
• Very Fast (Lighweight Container)
• Cross Platform
• Less Opinionated/Flexible

Laravel

• PHP
• Easy to learn
• Fast Execution
• Documentation easily available

Django

• Python
• Happy medium between
  very opinionated and less structured
• Lot of functionality out of the box
• Difficult to integrate a fancy front-end
• Python's data handling is amazing

Ruby on Rails

• Ruby
• Very opinionated
• Has great tools like scaffolding
  (build things fast)
• Out of the box functionality
• Ruby takes longer to run programs
  than some other programming languages

Express

• Javascript
• Very customizable
• Very lightweight
• Less build-in features
• Node is very fast

Basic feature in framework

1) URL Routing

• www.test.com/user
• www.test.com/booking
• Define which code to hits when url get hits
• Define good URL Pattern to use

2) Database Manipulation

• Manipulate and design database
• Structure the tables and models
• Read and write different entries in database

3) Templating

• Organize the data returned from web app
• Format Data: JSON, Raw, HTML, text, etc.

4) Security

• Most software developer is not security expert
• Use as-is or customize existing security

5) MVC

Model - View - Controller

1) Model == HTML

• Handle Interaction with db

• Responsible for moving stuff in and out of db

• Similar to HTML, which handles the knowledge of website as well as the structure

2) View == CSS

• Seen by user

• Display data on screen, which represent data that was manipulated in Model

• Similar to CSS, which add visual styles to structure.

At this point think of the View as the skin to the Model’s skeletal structure.

Just as the the CSS is the skin to HTML’s skeleton

3) Controller == Web Browser

• Middle man that takes data to and from the model and user and manipulate it, and routes it properly

• Brain of application

• Control the logic for how thing should work and where they should go

• Similar to web browser, accepts user input and translate it to command, so the page can properly function

• The browser compiles the CSS and HTML into renderable and manipulatable pixels on the screen

Criteria for choosing the correct framework

Popularity
&
Community size 

Sustainability

Support

Security

Documentation

Resource Availability

Try it out!

Framework
vs
Library

Framework: Reusing behaviors by how abstract classes and component interact with each other

Library: Collection of classes which provide reusable functionalitites

A framework defines a structure that you have to fill, while library has some structure that you have to build around

You call library,
Framework calls you

Google Trends