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
- New Language Features - like modules, generators, decarators, promises, async/await, etc.
- 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
Willing to change, to learn new things. Keep up with the latest trends, updates, etc. Though this can eventually lead to Tooling Fatigue.
Be a good communicator and collaborator, so try contributing to open source projects!
Enjoy it. You'll never get anywhere if you don't like what you're doing.
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
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.
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.
The Web Community is huge and friendly, always working on new features, libraries, posts and talks! I've been learning a lot just from:
Watching Conferences Talks from:
Reading Blog Posts from:
Reading Books like:
Listening to Podcasts like:
Working on Projects and talking in communities like:
- 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.
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.
- 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.
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.
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.
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.
Compile your preprocessor languages.
I'm using PostCSS and Typescript, and compile it all with gulp.
I'm using PostCSS along with:
Combine and Minify.
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
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.