Rob Ribeiro azurelogic httpsazurelogiccom About me Tooling ES6 Angular 20 Why care about JS tooling Reproducibility Quality Maintainability Reusability Tool classifications ID: 529067
Download Presentation The PPT/PDF document "JavaScript Tooling" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
JavaScript Tooling
Rob Ribeiro
@
azurelogic
https://azurelogic.comSlide2
About meSlide3
Tooling
ES6 Angular 2.0Slide4
Why care about JS tooling?
Reproducibility
Quality
MaintainabilityReusabilitySlide5
Tool classifications
Package managers
Unit test frameworks and test runners
LintersBuild toolsTranspilersModule LoadersScaffoldersSlide6
Package ManagementSlide7
npm
Node Package Manager
JS Package Repository
Frontend librariesBackend librariesExecutable toolsInstalled with Node.jsPro tip: Use
nvm on OS X and LinuxSlide8
Demo: npm
Initialize. Install packages. Install global.Slide9
package.json
Interactive guide:
http://
browsenpm.org/package.json“name” + “version” required“scripts” install, test, start, stop, restart + pre/post + more
“dependencies” npm install –save <package-name>“
devDependencies” npm install --save-dev <package-name>
NOT installed if NODE_ENV=production (unless --dev)Slide10
Let’s take a moment for SemVer
Semantic Versioning
http://semver.org
/Hopefully followed by everyoneTL;DR
Major.Minor.PatchMajor = breaking changesMinor = add featuresPatch = bug fixesSlide11
Let’s take a moment for SemVer
Semantic Versioning
http://semver.org
/Hopefully followed by everyoneTL;DR
Major.Minor.PatchMajor = breaking changesMinor = add featuresPatch = bug fixesSlide12
SemVer Syntax
Comparators: <, <=, >, >=, =
>=3.9.0
Or: ||
1.2.7 || >=1.3.0 <1.4Range: A - B >=A <=BWildcard: 1.x or 2.4.*Patch Only: ~
~1.2.3 >=1.2.3 <1.3.0; ~1.2 >=1.2.3 <1.3.0Exception ~1 >= 1.0.0 <2.0.0^ = no changes to left-most non-zero digit^1.2.3 >=1.2.3 < 2.0.0; ^4.3.0 >=4.3.0 <5.0.0; ^0.7.2 >=0.7.2 <0.8.0
This is the default for most packagesSlide13
Demo: npm
Use scripts.Slide14
Bower
Frontend package manager
Installed via NPM
$ npm install –g bowerInitialize$ bower
initbower.json.bowerrcSlide15
Unit testingSlide16
Test Stack
qUnit
vs Jasmine vs Mocha + Chai + SinonMocha: test frameworkChai: assertion librarySinon
: spies, stubs, and mocks (oh my!)Slide17
Spies vs Stubs vs Mocks
Spies record calls to the function, the
args
, return values, value of this, and exceptions thrownThe function still executes!!!Stubs = spies with preprogrammed behaviorOriginal function no longer runs
Can set return value or force an exception to throwMocks = stubs with preprogrammed expectationsAsserting that the method gets calledShould only need one at a timeSlide18
Demo: Mocha/Chai/Sinon
Setup mocha + chai +
sinon
. Write a test.Slide19
Karma
Automatic test runner
karma.conf.js
PluginsKey parametersbrowsers
Manual access default URL: http://localhost:9876/files: all the files you would load in a page + testsframeworks: mocha, chai, sinonreporters: how results get displayed
preprocessors Babel!Slide20
Demo: Karma
Installing. Configuring. Running. Debugging.Slide21
Build ToolsSlide22
Grunt vs Gulp
Config
vs Code
Also, webpackWeird module loader styleSeem popular with the React communitySlide23
Gulp
Pipeline concept
Parallelism
Use node streams In memory!API
tasksrcdest
pipeSlide24
Demo
Installation. Pipeline
design.
Running.Slide25
Odds ‘n’ EndsSlide26
Linters
Checks for basic errors and code style inconsistencies
Missing semicolons
Always use single quotes for stringsJSLint
JSHint JSCS vs ESLintESLint
ConfigurableCustom rulesParses JS to ASTSlide27
Transpilers
Babel
Formerly 6to5
Competitors: TraceurPolyfill, pluginsPresets
Configuration.babelrcpackage.jsonSlide28
Module Loaders
Replace <script>
AMD
“Asynchronous Module Definition”define([‘my-dependency’], function(dependency) { … });RequireJS
CommonJSvar dependency = require(‘my-dependency’);module.exports = function(){};BrowserifyES6
import ‘my-dependency’;Use Babel to convert ES6 to your favoriteSlide29
Scaffolding
Yeoman
“The web's scaffolding tool for modern
webapps”Faster way to scaffold a new project3 stepsInstall
yo (npm)Install a generator (npm)Run itSlide30
QuestionsSlide31
Thanks!Slide32
Resources
npm
:
https://www.npmjs.com/Bower: http://bower.io/
Mocha: https://mochajs.org/Chai: http://chaijs.com/
Sinon: http://sinonjs.org/Karma: https://karma-runner.github.io/Slide33
Resources
ESLint
:
http://eslint.org/Gulp: http://gulpjs.com/
Babel: https://babeljs.io/Browserify: http://browserify.org/RequireJS
: http://requirejs.org/Yeoman: http://yeoman.io/