A Picture of a Bunch of Cute Web Brands as Toys

Making web apps has gotten pretty complicated, it seems every language and company wants to come up with their own way of doing it! Deep down all we're doing is serving html, css, and javascript to a user, but there's a lot to bear in mind:

  • New Language Features - like modules, generators, decarators, promises, async/await, etc.
  • Legacy Suport (polyfills, shims, vendor prefixes) for JavaScript
  • Backend Programming - Writing a server in JavaScript, Python, Go, C++, you name it.
  • Automation - streaming tasks like compiling our apps and compressing our images and making icon fonts.
  • Deploying your app with services like Docker, AWS, DigitalOcean, etc.
  • Dev Ops - load balancing your app, working with microservices and a polyglot architecture.
  • Testing - unit testing your app, linting, type checking, etc.

Frankly, it can be overwelming, there's no way you'll know how every part works, but to quote Brenna O'Brien it's better to just "be aware" of these technologies and focus on what you love.

At the same time, there's no excuse to not know about web development, machine learning, graphics, compilers, game development, not when there's so many books published by O'Reilly, Packt, Manning Publications, CRC Press, etc.

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 like crazy! Facebook, Twitter, Tumblr, Nvidia, you name the company, they're hiring! Even if just for an internship, a few 10Ks doesn't hurt. 😉

  4. Enjoy it. You'll never get anywhere if you don't like what you're doing.

Javascript

Javascript has tons of little languages you can use, and that's besides just the frameworks and libraries available. - TypeScript - JavaScript Beta + 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 Unopinionated View Layer, follows the GNU style of a single library that does one thing very well. Used by Wordpress Calypso.

  • Angular 2 - The next version of Angular, 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.

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

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.

Community Outreach

The Web Community is huge and friendly, always working on new features, libraries, posts and talks! I've been learning a lot just from:

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 spagetti 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/
  |- player/
    |- spr_player_idle_left # Sorta like CSS BEM
|- 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 Module - 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 # export * from 'common'
|- 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

Pokemon Route 1

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

CodePen.io Ebay.com
codepen.io/alaingalvan/pen/jPMXXj ebay.com/itm/Apple-iPad-Pro-32GB-Wi-Fi-12-9in-Gold-Latest-Model-ML0H2LL-A-New-Sealed-/301798988450

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:

  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.

You could also compile your whole app to static files on the server for SEO:

  • Angular 2 Seed - A seed project to build static Angular 2 apps.

  • Jekyll - Github's solution to repo pages.

Conclusion

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


4,245 4 68