Designing a Web Application

Making web apps has gotten pretty complicated, it seems every company, language, and individual wants to come up with their own way of doing it!

Deep down all we're doing is sending strings of html, css, and javascript to a user through HTTP, but there's a lot to bear in mind:

• State of the Art - Web Development is constantly changing, what's the current State of the Art?

• New Browser Features - modules, async/await, generators, decorators, promises, etc.

• Legacy Suport - polyfills, shims, vendor prefixes for older browsers that don't support current JavaScript standards.

• Backend Programming - JavaScript isn't the only language that can server HTTP requests, C/C++, Rust, OCaml, Scala, and many more can too.

• Automation - streaming tasks like compiling our apps and compressing our images and making icon fonts.

• Dev Ops - Using tools like Docker to deploy to cloud providers like AWS, DigitalOcean, etc. Load balancing your app, working with micro-services and a polyglot architecture.

• Testing - Speeding up new updates to the site through automated testing, linting, type checking, etc.

Frankly, it can be overwhelming, its nearly impossible to know everything about every part of the stack, but:

It's better to just "be aware" of these technologies and focus on what you love. ~Brenna O'Brien

Learning Web Technologies

Eric Elliott, Author of Programming JavaScript Applications described what was also chimed by JavaScript Jabber in "Should I go to College?", the need for developer to be:

1. Willing to change, to learn new things. Keep up with the latest trends, updates, etc. Though this can eventually lead to Tooling Fatigue.

2. Be a good communicator and collaborator, so try contributing to open source projects!

3. Talk with recruiters and apply! Facebook, Twitter, Tumblr, Nvidia, you name the company, they're hiring! Even if just for an internship.

Javascript

Javascript has tons of little languages you can use, and that's besides just the frameworks and libraries available.

• TypeScript - The latest JavaScript + Types

• CoffeeScript - Tiny JavaScript

• NativeScript - JavaScript + Native Objects

• PureScript - JavaScript + Functional Programming

Frameworks

We're saturated with frontend frameworks, TodoMVC has a pretty good list of them all:

• React - Facebook's simple rendering library. Used by Instagram, Wordpress, Capital One, DeviantArt and way more.

• Vue - A very Tiny view library developed as a side project from Evan You, a Meteor Dev.

• Angular - Angular has gone through a rewrite, adopting new standards like @decorator, class, ES6 modules, etc.

• Ember - One of the first MVC frameworks for front end development. In use in places like Groupon or for the Ghost CMS.

CSS

There's been a lot of debate on the Cascading and Sheets portion of CSS, with talks like The End of Global CSS.

PostCSS - Converts CSS to an abstract syntax tree that can be modified very quickly, Benchmarks put PostCSS as even faster than LibSass, the C++ Sass implementation.

CSSNext - A PostCSS plugin that adds CSS4 features.

BEM - A design methodology as an acronym, Block, Element, Modifier.

File Structure

One way to be sure of what you're doing is to know what good file structure is like. What I love about places like Scotch.io is that they acknowledge this by always starting off a post with the project structure.

File Structure is a lot like organizing an Analog Synth, if you let it, the wires can look like a spaghetti or a spider web.

Two organizational patterns I've noticed are:

Sorted By File Type - Game Maker Studio

This has been done for years in Game Engines like Game Maker Studio, Unity, Unreal Engine, and with web apps like Prepros, Adobe Brackets. When working with teams creating different portions of the same component, this model worked really well.

├─ sprites/
├─ backgrounds/
├─ sounds/
├─ scripts/
├─ objects/
└─ rooms/

Sorted by Component - Wordpress Calypso

Makes your file structure look more like a dependency tree, and has been adopted by a number of programmers, from Unity developer Keijiro Takahashi to Mark Dalgleish in his talk The End of Global CSS, to the Wordpress Calypso, their new React/Express frontend app.

├─ client/
├─ components/
│   ├─ gravatar/
│   │  ├─ index.jsx
│   │  └─ style.scss
│   └─ site-selector-modal/
│      └─  ...
├─ auth/
├─ post-editor/
└─ ...

Sorted by Task - Angular 2.0 Beta Structure

Angular 2 organized it's files in regular folders, with a corresponding .ts file for the folder they want to export.

├─ src
│  ├─ common/
│  │  ├─ directives/
│  │  ├─ forms/
│  │  ├─ pipes/
│  │  ├─directives.ts # export all of directives/, could also be done with an index.ts file.
│  │  └─ ...
│  ├─ core/
│  └─ ...
├─ common.ts
├─ core.ts
├─ ...
└─ tsconfig.json

Generators & Boilerplates

You can get a lot more done a lot faster if you automatically generate your code, or have some way to start.

Ruby has had generators for a long time, so it's only natural for the features of that language to bleed into JavaScript.

• Yeoman - Scaffold out your application with some yeoman generators, making say, angular directives from one command vs googling an implementation and forking that.

• SlushJS - Another Scaffolding tool based on GulpJS.

Routes

Idealistically, you want the URLs of your website to be expressive, which URL do you think is better:

Codepen describes their routes perfectly, it's clear that this is Alain's pen of slug jPMXXj. Ebay decides to shorthand item to /itm/... include a messy version of the item's title in the link, and some random number.

In the backend, Codepen is powered by Ruby, so they probably use Sinatra to handle routes. Routes used to be a topic exclusive to the backend of a website but now front end frameworks can handle them too thanks to html5 mode.

Deployment | The Web Obesity Crisis

Just like how in a C/C++ application, FORCEINLINE void YourFunction() will cause the machine code of the function to be injected wherever it's called (causing a boost in performance in exchange for file size), combining and minifying your webapp will cause your app to perform faster by making less requests.

There's a debate on combining your files or serving them individually, Guest Speaker Nik Molnar @ Javascript Jabber said HTTP/2 is making that obsolete, but for years the web has said Combine your Files to One.

The fact is, Web Obesity is a big problem. Maciej Ceglowski's The Website Obesity Crisis is a great talk that describes this, but let's look at some solutions to web obesity, project management, asset management, etc. For every 100 ms of response time, amazon lost 1% of sales. Esty saw an increased bounce rate of 12% on mobile if 160kb of images were on the page.

You can use automators like Gulp, Grunt, GNU Make, or Chron Jobs to process/deploy your files automatically, but there is some debate on using automators.

1. Verify your Code and Lint it!

   • JSCS is a module that's used by Three, jQuery, Ember, Angular 1, and more to make sure your code is formatted and follows certain standards established by a given project.

2. Compile your preprocessor languages.

   • I'm using PostCSS and Typescript, and compile it all with gulp.

   • I'm using PostCSS along with:

     • Autoprefixer
     • CSS Next
     • Style Guide Generator

3. Combine and Minify.

   • Compile .ts / .js with the Typescript Compiler in Gulp by itself, or use browserify and uglifyJS with this workflow.

For the smallest .jpeg, .png, .svg files, as well as sprite sheets, you'll need a system that can compress, texture atlas (if applicable), and mipmap your images. Responsive Images, a talk Jason Grigsby gave on "The Web Ahead" goes over new browser features to tackle mipmap routing.

• Imagemin - a bundled image compressor that compresses .gif, .jpeg, .png, and .svg files.

• Sharp - a tool to shrink your images down.

Conclusion

This guide sorta scratches the surface, but then there's developing mobile/desktop apps using web technologies, stuff like Electron, Windows 8/Windows 10 apps, Apache Cordova, and Meteor.

The Web Community is huge and friendly, always working on new features, libraries, posts and talks! Here's a few resources to wrap up:

Working on Projects and talking in communities like:

• Codepen

• r/web_design

• r/webdev

• reactiflux Discord Server

Watching Conferences Talks from:

• JSConf

• ngConf

• nodeConf

• Wix Tech Talks

• O'Reilly

• Google Developers

Reading Blog Posts from:

• Facbook Engineering Blog

• Google Developers

• Codepen Blog

• Tumblr Developers

• Scotch.io

Reading Books like:

• Elequent Javascript by Marijn Haverbeke

• Programming Javascript Applications by Eric Elliott

• GitBook - A Free Book Community

Listening to Podcasts like:

• Codepen Radio

• ShopTalk

• Javascript Jabber

• The Web Ahead

Grabbing Free Resources from places like:

• Let's Encrypt - Free SSL Certificates

• FbStart - new program from Facebook designed to help early stage mobile startups build and grow their apps.

• Github Education - Dozens of free resources from great companies to help students learn.