The Javascript Ecosystem

Navigating the jungle of crazy JS Everything

by Ben Junya

http://mrbenj.github.io/js-ecosystem-preso

About Me

  • Android Developer at 72andSunny
  • Enterprise web developer for Lexus.com (Team One Advertising)
  • Site architect for teamone-usa.com
  • Lead Developer at Diamond Foundry
  • Self taught Software and web developer
  • Bachelor's of Music Education from Illinois Wesleyan University

WARNING!

2 ULTIMATE RULES TO LEARNING™

Have fun

Enjoy the process

The state of Javascript

GOTTA GO FAST

THE JS ECOSYSTEM IS BLOATED!

npm (10/23/17) by the numbers:

577,389 packages

460,069,942 daily downloads

3,189,943,716 weekly downloads

13 billion+ monthly downloads

It's an incredible and exciting time to be a Javascript developer

  • Front end unit testing
  • Web components
  • Service workers
  • Websockets
  • JSX and TypeScript
  • Principles of Modularity
  • Functional Programming

More tools

More complexity

More frustration

#JavascriptFatigue

Back to basics


						<html>
							<head>
								<link type="text/css" rel="stylesheet" href="style.css" />
								<script src="myscript.js"></script>
							</head>
							<body>
								<h1 class="headline">Hello HTML page!</h1>
							</body>
						</html>

HTML, CSS, Javascript

Back to basics


						<html>
							<head>
								<link type="text/css" rel="stylesheet" href="style.css" />
							</head>
							<body>
								<h1 class="headline">Hello HTML page!</h1>
							</body>
							<script src="myscript.js"></script>
						</html>

HTML, CSS, Javascript

Writing code


					$(document).ready(function() {
						var username = 'John Doe';
					});

Why are you using jQuery?

Writing code


					document.addEventListener('DOMContentLoaded', function(){
						var username = 'John Doe';
					});

Why are you using ES5? Use ES6 instead!

Writing code


					document.addEventListener('DOMContentLoaded', () => {
						const username = 'John Doe';
					});

Oh, you need to transpile with Babel!

Installing Stuff...


					$ npm install babel-cli

Wait, why are you doing that? Bundle with webpack and use a loader!

Installing Stuff...


					$ npm install webpack
					$ npm install babel-loader

You have to configure Webpack!

  • Configure Webpack
  • Configure Hotloading
  • Configure webpack-dev-server
  • Configure Unit testing
  • Configure ESLint
  • Configure... EVERYTHING

Wait, why are you doing XYZ? Use ABC instead!

Stop using that library. That library sucks

The worst conversation

Hey, what programming language are you learning right now?

PHP

Ohhhh, don't use PHP. Use Python instead because...

The worst Javascript conversation

What framework are you learning/using?

React

React is stupid! Because...

Navigating the npm Jungle

Before we begin...

  • Back to basics - It's just Javascript!
  • Stay agnostic
  • It's OK to have opinions

2013

What's hot?

Task Runners

  • Pre-compile CSS (Sass to CSS)
  • Start a development server
  • Watch for changes and auto-reload
  • Minify/Uglify assets for production

Automated the tedious parts of development

Increased developer satisfaction


					$ grunt

Evolution!


					$ gulp

Dependency Management


					$ bower install
					

						<html>
							<head>
								<link type="text/css" rel="stylesheet" href="style.css" />
								<script src="lib/jquery3-0-1.js"></script>
								<script src="lib/bootstrap.min.js"></script>
								<script src="lib/buzz.js"></script>
								<script src="lib/video.js"></script>
								<script src="lib/slick.js"></script>
								<script src="lib/lodash.js"></script>
								<script src="script.js"></script>
							</head>
							<body>
								<h1 class="headline">Hello HTML page!</h1>
							</body>
						</html>
					

						<html>
							<head>
								<link type="text/css" rel="stylesheet" href="style.css" />
								<script src="out/bundle.js"></script>
								<script src="script.js"></script>
							</head>
							<body>
								<h1 class="headline">Hello HTML page!</h1>
							</body>
						</html>

EVOLUTION!

(again)

What were the problems to solve?

  • Bundle everything into a single file
  • Load only the libraries that we need
  • Manage 3rd parties library versions

Javascript goes modular!

Node.js


						$ npm install expect
					

						var expect = require('expect');
						expect();

YET ANOTHER EVOLUTION!

Why?

  • Use npm modules in the browser
  • Still bundles everything together
  • Excellent task runner support

The New Standard

Frameworks

Frameworks

What are frameworks?

  • Easier way to write re-usable / modular code
  • Binding data to views
  • Make websites feel like mobile apps

#JavascriptFatigue often stems from framework fatigue

Why are frameworks stressful?

  • Just as opinionated as JS itself
  • Need to do things the "their" way
  • Come with a ton of 3rd party libraries and tools specific to each framework

The new new standard

  • Task runner
  • Dependency bundler
  • Framework

it's still the same


						<html>
							<head>
								<link type="text/css" rel="stylesheet" href="style.css" />
							</head>
							<body>
								<div id="app"></div>
							</body>
							<script src="bundle.js"></script>
						</html>

HTML, CSS, Javascript

Tools evolve

Task Runner + Dependency bundler

Why the complex tools?

Developer Satisfaction

Bootstrapping and Boilerplating

  • Yeoman
  • HTML5 Boilerplate
  • create-react-app
  • create-react-native-app + Expo
  • "Config-free" tools like Jest (testing framework)

How to keep up

  • Reddit r/programming
  • Local meetup groups (JavascriptLA, js.la, Code and Coffee)
  • Slack Channels
  • Contribute and share knowledge on Github

What do I do now!?

  • Learn to configure tools! (Webpack)
  • Experiment with one thing at a time
  • Ask for help when Bing fails

What do I do now!?

  • Learn to configure tools! (Webpack)
  • Experiment with one thing at a time
  • Ask for help when Bing Google fails

Learning Strategies

  • Isolate tool / framework into its own environment
  • Make an "experiment" branch
  • Don't be afraid to fail!

Other tools to include in JS app architecture

  • Transpiler (Babel)
  • Linter (ESLint)
  • CSS pre-processor (PostCSS, Sass)

Other tools to include in JS app architecture

  • Transpiler (babel-loader)
  • Linter (eslint-loader)
  • CSS pre-processor (postcss-loader, sass-loader)

RELAX

  • It's just Javascript
  • Back to Basics: HTML, CSS, JS
  • Task runner, dependency management, framework

Thank you GDG-LA!!

Github: @MrBenJ
Email: bjunya@gmail.com