News from the
Bleeding Edge
Browser Pop Quiz
Last version check — February 2015:
Browser Pop Quiz
As of March 25, 2015:
Firefox Highlights
Version 37 (beta)
Shipping next week
As usual, lots of new ES6 features
Details next month... ;)
Opera
Based on Chrome 41
Not much else to talk about from a dev perspective
Safari & IE
Security updates
Holy crap, a new browser! From Microsoft!
Announced Jan 21 – will ship with Windows 10
See our slides from last month for details
Culture change?
One small, but hopeful, example...
background-blend-mode is well supported, with one exception:
Microsoft on Monday announced a code
contribution from Adobe!
Adobe’s Web Platform Team provided its first contribution in the latest build of
Windows 10, supplying a feature for CSS gradient midpoints. It allows developers to choose
a location between color stops of a CSS gradient and is specified in the CSS images draft...
[providing] full support for blend modes.
ES6
ES6 === EcmaScript v6 === ES.next === Ecma-262 Edition 6
Next generation of JavaScript (available now)
Release candiates:
- RC 1: Feb 20
- RC 2: March 4
- RC 3: March 17
Any day now...
Not actually a W3C spec (it's a WHATWG spec)
Aims to improve on the age-old XMLHttpRequest (Ajax) API
- Separate interfaces for Headers, Request and
Response
- Promise-based API
- Typed request/response body data (ArrayBuffer, Blob, FormData)
- Matching methods (.arrayBuffer(), .blob(), .formData() etc.)
- Stream support (planned)
fetch("/data.json").then(function (response) {
if (response.ok) {
res.json().then(function (data) {
// use the data!
});
}
else {
console.log("Response is bad", res.status);
}
},
function (err) {
console.log("Fetch failed!", err);
});Currently available in FF 39 (nightly) and Chrome 42 (canary).
Github also provides a polyfill.
Sidebar: W3C vs HTMLWG vs WHATWG
- W3C formed in 1994,
founded by Tim Berners-Lee
- HTML Working Group (HTMLWG) is a subgroup of W3C
- After HTML 4.01 was released in 1999, HTMLWG pursued XHTML 2.0
- Mozilla + Opera formed WHATWG to pursue what became "HTML5"
- W3C eventually dropped focus on XHTML and adopted HTML5
Sidebar: W3C vs HTMLWG vs WHATWG
Today
- WHATWG manages "living standards" and moves fast
- W3C / HTMLWG move much slower, but "snapshot" certain WHATWG standards as stable specs
- All that matters is browser implementation (see fetch)
Languages, Frameworks & Tools
- Mostly React-specific fixes and tweaks, but...
- Now supports ES6 class syntax
Yet another example of why ES6 is so important today!
- JS-based nudity detection
By Addy Osmani, Google Platform Engineer
Tons of performance-related dev tools tips
Search
- across npm, Bower, Rubygems, NuGet, ...
- by language, license
But the most useful feature...
Subscribe to receive updates when packages change!
Bitovi Open Source Event
Help Bitovi (makers of CanJS, jQuery++, etc.) test the CanJS docs
March 26 (tomorrow), times flexible
A "few hours" of your time, plus get paid!
- Entrepreneurship-focused hackathon
- 1st prize: invite to HACKcelerator
- May 9-10 at Capital Factory
- $10 to enter
And now for something completely different...
VIM Adventures
Learning VIM while playing a game
$25 / 6 months access to all levels
What is npm?
- A repository of open source projects *
- A CLI package manager
- Bundled with Node.js
Purpose:
Simplify the development of applications and tooling
* Note that there is no specification of "Node.js" or "JavaScript". Npm is everywhere.
Why npm Matters?
- No choice =)
- Ease of use
- DRY, modular code (Unix philosophy)
- Standards - kinda
- Centralized development approach
- Package managers are the center of a development ecosystem
Why npm Matters?
Here are a few stats:
That's nearly 1.2 billion packages downloaded.
Last month.
Where is npm used?
- SSJS (Node.js/io.js)
- UI (jQuery)
- CLI (yeoman, bower, grunt/gulp)
- App deployment (npm install)
- Infrastructure Orchestration
Really? All the things?
Wait, where does Bower fit in?
npm vs. Bower
Demo
https://github.com/edgeATX/npm-demo
First-time Setup
Only required if you plan to publish a module
- Create an account at npmjs.com
- Run npm adduser to connect your local config to npmjs.com
- Run npm set to configure your standard package.json fields
Typical Project Lifecycle
- Run npm init to generate package.json
- Develop your module, library, etc.
- Use npm install --save[Dev] to add dependencies
- Write some unit tests and connect to CI (optional, but recommended)
- Update your README, license, etc.
- Update the version in package.json
- Publish with npm publish
- Go to #2
Etiquette
Don't Abuse npm
Workflow
Research → Build → Test → Publish → Announce
Announce? No fear!
Also...
- MochaJS is pretty awesome... just sayin'.
- Learn the CLI shortcuts to save time.
Private Registries
They are real!
It's an evolving ecosystem
Tips 'n' Tricks
npm i mymodule // npm install mymodule
npm i mymodule -S // npm install mymodule --save
npm link // Link to a global module
npm update npm // Upgrade your npm installation
package.json:
"scripts": {
"start": "node --harmony index.js",
"test": "mocha test"
}
CLI:
npm test
npm start
Npm Roadmap Highlights
- Multi-stage installs
- Progress bars
- Automatic dedupe
- Lot's of dependency management options (peer, optional, etc)
- Better shrinkwrap
- More thoughts on use cases outside of the Node.js ecosystem
←
→
/
#
