howdy

i’m shannon

a web nerd
an intro to es6 and custom elements
or,

you might not need a framework
i ♥ the future
i’m greedy and lazy
border-radius
sprites!
:)
sprites!
:(
polyfill: v. to fill in an API using JavaScript (or Flash or whatever) if the browser doesn’t have it natively @rem
css3 pie!
:)
css3 pie!
:(
browser wars 2.0
evergreen browser: n. a browser that automatically updates itself outside of the os release cycle @wycats
border-radius
moar
css js
@import './sosumi.css';
node.js
require()
module.exports
require.js
define(fn(){})
return
es6
import
export
class
extends
// foo.js

export default {
  data: null,

  update({ name = '', items = [] } = {}, ...args) {
    this.data = { name, items, args });
  }
};
// bar.js

import Foo from './foo';

Foo.update();
Foo.update(null, 'bar', 'qux');
Foo.update({ name: 'Waldo' });
Foo.update({ items: ['bar', 'qux'] });
DEMO
System.import()
cjs? amd?
there’s a polyfill for that
npm? bower?
there’s a tool for that
<script>System.import('js/app');</script>

# self-executing (sfx) bundles
jspm --bundle-sfx js/app bundle.js

<script src="bundle.js"></script>
DEMO
moar
css js html
web components
polymer!
:)
polymer!
:(
document.registerElement()
DEMO
many of the features you get from a framework have been added to the specs or are now trivial to implement
class extends import export ()=>{} ...args let const html`hello${foo}world` ...
System.import() document.registerElement() el.querySelector() window.fetch() ...
that said,

you might still need a framework
stay curious my friends
thanks

shannonmoeller.com

github.com/shannonmoeller

@shannonmoeller