How Web Apps Work

www.kylecoberly.com

Who Am I?

Browsers Are Awesome!

But first, some background.

This is pretty complicated.

What is the internet?

Less like this...

...and more like this.

Except it's this big

The web is not the internet.

The Web

Website or Web App?

Website or Web App?

READ

USE

Clearly a Website

Clearly a Web App

...What's This?

How Websites Work

Documents

  • You request a document from another computer
  • The document is written in HTML
  • The contents of the document are sent back with HTTP response
  • Your browser renders the document

Documents

  • HTML has a simple syntax
  • ~100 tags
  • Describe content
  • Can link to other documents
  • Can include stylesheets and script files
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
        <script src="behavior.js"></script>
    </head>
    <body>
        <h1>Hello world!</h1>
    </body>
</html>

Documents

  • Per the W3C, documents are always delivered in HTML
  • Can be written in something else and translated to HTML
  • HTML is an evolving standard

Unstyled Documents Don't Look Like Much

Stylesheets

  • Documents can link to stylesheets
  • Stylesheets are requested and delivered the same as HTML
  • Written in CSS
  • Your browser uses CSS rules to determine how something looks

Stylesheets

  • Even simpler syntax
  • ~250 properties
  • Describe how content should look
  • Can do simple animations
  • Multiple stylesheets can "cascade" from general to specific
body {
    font-size: 12px;
    background-color: black;
}

h1 {
    color: white;
}

Stylesheets

  • Per the W3C, stylesheets are always delivered in CSS
  • Can be written in something else and translated to CSS
  • CSS is an evolving standard

HTML and CSS Are Static

Scripts

  • Documents can link to scripts
  • Scripts are requested and delivered the same as HTML & CSS
  • Written in JavaScript
  • Your browser can use JavaScript to do just about anything

Scripts

  • Comparatively complicated syntax
  • Tons of parts
  • Intended to describe how content should behave
  • Can do everything from scroll effects to 3D games
  • Form the basis for web applications
document.getElementsByTagName("h1")[0].addEventListener("click", function(event){
    alert("You clicked on the title!");
});

Scripts

  • JavaScript was written by Brendan Eich in 1995
  • It is the defacto standard because all browsers implement it
  • Can be written in something else and translated to JS
  • JavaScript is (now) a living standard governed by ECMA

A Thing That Happened To Me

The Front End Holy Trinity

Preprocessors

  • If it runs in the browser, it has to be HTML/CSS/JS*
  • A preprocessor lets you write in a language that converts to one of those
  • The preprocessor outputs the HTML/CSS/JS that you put on the server

HTML

Haml, Handlebars, Mustache

 

CSS

LESS, SASS/SCSS

 

JS

CoffeeScript, LiveScript, Dart

Learn the language before you learn a preprocessor.

-Everyone

Transpilers

  • Like a preprocessor, but for different versions of the same language
  • Can help paper over the differences between browsers.
  • Helpful for older IE support
  • Also called "shims"

HTML

HTML5Shiv

 

CSS

Modernizr

 

JS

Babel, Traceur

Libraries

  • Give you some extra functionality on top of what you get in the language
  • Someone else's solution to a problem
  • Reduce the boilerplate in your code
  • Can be "expensive"

CSS

Normalize, Bourbon, YUI

 

JS

jQuery, Underscore, LoDash, SWFObject, D3

Frameworks

  • More comprehensive than a library- a complete solution
  • Difficult to mix and match
  • Reduce the boilerplate in your code
  • Can feel like another language
  • Can be extremely "expensive" and "opinionated"

HTML

Jekyll, Middleman, Metalsmith

 

CSS

Bootstrap, Foundation, jQuery UI

 

JS

Angular, Ember, React, Backbone

Regardless, the output must be HTML/CSS/JS*.

*What about Flash, Silverlight, and Java Applets?

Forget this ever happened.

Hang on, JavaScript isn't actually part of the web standard?

Google tried to destroy JavaScript once...

Google failed. You will too. Always bet on JavaScript.

So I'm Just Getting These Files Off Of Someone's Computer?

Web Servers

  • Servers are just normal computers that listen to requests instead of just sending
  • The software to listen for requests is called Web Server software
  • The Web Server software decides what to do with each HTTP request it gets, and generates the HTTP responses

Web Servers

  • Since a web server is a normal computer, it needs an operating system
  • The OS market for servers is very different than it is for consumers
  • Developers work much "closer to the metal" on server operating systems

Open Source Dominates The Server World

  • 97% of servers run Linux
  • 47% of servers run Apache HTTP, 11% run Ngnix
  • Windows Server market share is ~1%
  • Microsoft IIS market share is ~30%

Server Software

  • When you ask for a file, the server might give it you
  • It might also send your request to a program and send you the output
  • The program might create a virtual "file" based on dynamic data

How are the programs on the server different than the browser ones?

Client-Side

  • Programs run in the browser
  • Must be written in JavaScript
  • Can't directly access files on the server
  • All code is viewable by users
  • Run as fast the user's computer

Server-Side

  • Programs run on the server
  • Can be written in any language
  • Can access server files
  • Code is hidden from users
  • Require an internet "round trip" to run

Popular Server-Side Languages

  • Ruby
  • Python
  • JavaScript
  • Java
  • C# (ASP.NET)
  • PHP*
  • Erlang
  • Scala
  • Haskell

Traditional Approach

  • Server software sends data from HTTP request to a program
  • The program loads an HTML template with "placeholders" for the dynamic parts
  • The program replaces the placeholders with data
  • The program gives the server software the finished HTML "file"
<html>
    <head></head>
    <body>
        <h1>Thanks for logging in, <% userName %></h1>
        <p>Today's date is <% todaysDate %></p>
    </body>
</html>
<html>
    <head></head>
    <body>
        <h1>Thanks for logging in, Kyle Coberly</h1>
        <p>Today's date is August 15th</p>
    </body>
</html>

Pros

  • Great if user's computer is relatively weak
  • Easy for developers to understand

Cons

  • Really slow in 2015 (full internet round-trip for every page)
  • Page "flickers" when it loads
  • Has security and scaling issues

Traditional Approach

The Traditional Server-Side Stack

  • A Linux computer
  • Running Apache web software
  • With data stored in MySQL*
  • And programs written in PHP

The LAMP stack

Popular LAMP Frameworks

  • WordPress
  • Drupal
  • Laravel
  • Symfony
  • Zend
  • CakePHP

Not-Really-LAMP-But-Same-Idea

  • Ruby on Rails
  • ASP.NET
  • Django

MySeqwuh?

Databases

  • Every computer and program in the process tries to finish as quickly as possible
  • Anything that needs to still exist once the programs finish running needs to get stored
  • You can store data in files
  • Easier to search and scale with dedicated storage software

Databases

  • The server's programs can read and write to the database
  • They can give the database inputs from the HTTP Request, and include data from the database in their output
var firstName = Database.call("getFirstName(" + request.userName + ")");

return "<p>Welcome, " + firstName + "!</p>";

Relational

  • Traditional approach
  • Enforced structure
  • Robust language (SQL)
  • Highly reliable
  • "Heavy"
  • MySQL, PostGres, Oracle, SQL Server

NoSQL

  • Newer approach
  • No structure
  • Works well with JavaScript
  • Unreliable
  • "Light"
  • Mongo, Cassandra, Redis

Database Types

Databases

Server software sends HTTP request to a program, which can request data from a database, and combine it with files to generate an HTTP response.

So Are These Web Apps?

Not Necessarily.

  • Even a website might use this many systems
  • Modern web apps can be LAMP stack, but usually aren't
  • LAMP was designed for pages, not apps

Web App Differences

HTTP Requests also can send instructions to write, modify, and delete data. The HTTP Response usually confirms that the action completed successfully.

What Do Apps Look Like Now?

  • Same parts, different roles
  • Instead of server programs building static files, an application is also running in the browser
  • The browser has the "business logic"
  • Server just handles things that can't be handled on the client - auth, data, some calculations

Browser Frameworks Dominate

Modern App Architecture

Architecture Notes

  • A CDN server delivers static files
  • App data is retrieved via a separate "API"
  • Multiple apps can use the same API (web and mobile)
  • The API can become a product (Twitter, Google Maps, Facebook)
  • An API can use other APIs and combine/process their data
  • Still building dynamic HTML & CSS, just on the client
  • "MEAN" Stack, "SANE" Stack

Infrastructure Tools

  • Amazon Web Services
  • Rackspace
  • Google Compute Engine
  • Microsoft Azure

 

  • Heroku
  • Engine Yard
  • Google App Engine
  • Redhat OpenShift

 

  • Firebase

Notes From The Bleeding Edge

  • Push Data with Web Sockets
  • WASM
  • HTTP2
  • IOT
  • Wearables
  • Hardware Integration

Practical Example

Front End?
Back End?
Full Stack?

What Questions Do You Have?

Thank you!!

www.kylecoberly.com

How Web Apps Work

By Kyle Coberly

How Web Apps Work

Overview of web app architecture

  • 1,433
Loading comments...

More from Kyle Coberly