Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada More info at www.fitc.ca/webu Components are the Future of the Web: It’s Going To Be Okay with Tessa Thornton OVERVIEW Overview JavaScript innovations in 2014 coalesced on a common theme: the public release of React.js, the announcments of the roadmaps for Ember and Angular 2.0, and Google betting big on Polymer, all emphasize that the future of the web lies in declarative components. This direction can seem radical and backwards to those of us with painful memories of inline event handlers and XML, who fear re-living the hell of tightly-coupled, unmaintainable code. This talk will focus on the real-world motivations behind this shift, and explain why `ng-click` is not your grandma’s onClick. I’ll also discuss the popular (currently usable!) implementations of this philosophy, and how leveraging components can lead to happier developers and more maintainable code, regardless of your framework of choice. OBJECTIVE Convey the motivations and benefits behind recent directions in front-end JavaScript development. TARGET AUDIENCE Novice web/JavaScript developers that aren’t yet sold on a framework. ASSUMED AUDIENCE KNOWLEDGE Basic JavaScript and HTML knowledge. FIVE THINGS AUDIENCE MEMBERS WILL LEARN A brief history of how JavaScript got to where it is The difference between imperative and declarative programming How writing declarative code can simplify front-end development How declarative APIs are being introduced to the browser How you can take advantage of declarative components today, regardless of framework/library

1. Components)are)the)future)of)the)web.
It's%going%to%be%okay.

2. Tessa%Thornton
Front&end)developer.
I"work"at"Shopify.
In"Toronto."
@tessthornton

3. A"roman(cized"and"slightly"
inaccurate"history"of"web"
apps

4. <form action="submit.php" method="POST">
<input name="name" type="text">
<select name="favourite_color">
<option value="00ffff">Red</option>
<option value="ff00ff">Blue</option>
<option value="ff0000">Yellow</option>
</select>
<input type="submit">
</form>

5. Then%JavaScript%grew%up
<form>
<input name="email" type="text" onblur="validateName()">
<button onclick="submitForm()">Submit</button>
</form>

7. Strict&separa+on&of&concerns!
• HTML&is&for&content
• JavaScript&is&for&behaviour
• CSS&is&for&presenta/on
and$so$it$was$wri+en

8. <button id="formSubmitButton">Submit</button>
<script>
$("#formSubmitButton").click(function () {
$(".form-input").each(function () {
$(this).validateWhatever().errorMessages();
});
if (allThingsAreValid) {
$.ajaxStuff(function (response) {
$(".success-message").show();
$(".form").hide();
});
}
});
</script>
and$we$called$it$Best%Prac*ces

9. Remember&when&Our$best$prac,ces$
were$killing$us?

10. ..."We"did"it"again.
these%best%prac+ces%haven't%kept%up%with%the%reali+es%
of%building%complex%UIs

11. Is#HTML#really#for#content?
<select id="countryList"></select>
<script>
$.get('countrylist.json', function(data) {
$.each(data, function (i, item) {
$('#countryList').append('<option val=' + item.val + '>' + item.name + '</option>');
})
});
</script>

12. Is#this#content?
<input type="range" min="0" max="10" step="2" value="6">

13. HTML%isn't%just%for%content,%
and%it%never%was

14. <input type="range" min="0" max="10" step="2" value="6">
<picture>
<source srcset="images/extralarge.jpg" media="(min-width: 1000px)">
<source srcset="images/large.jpg" media="(min-width: 800px)">
<img srcset="images/medium.jpg" alt="A giant stone face ">
</picture>
<select name="provinces">
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
</select>

15. Time%out:%What's%a%
declara3ve%API,%and%why%do%I%
want%one?

16. Declara've)vs.)Impera've)
programming
Impera've!specifies!the!steps!to!take!to!achieve!the!
desired!result
Declara've!code!specifies!what!the!desired!result!is!
and!leaves!the!implementa4on!up!to...!something!else

17. Standard'Impera,ve'vs.'Declara,ve'
code'example
var nums = [1, 3, 7, 11, 13];
// imperative:
var total = 0;
for (var i = 0; i < nums.length; i++) {
total += nums[i];
}
// declarative:
var total = nums.reduce(function (accumulator, num) {
return accumulator + num;
}, 0)

18. Example:)SQL)is)everybody's)
favourite)declara:ve)language
SELECT * FROM students WHERE id = 5

19. HTML%has%declara.ve%APIs
<input type="range" min="0" max="10" step="2" value="6">

20. We#didn't#really#learn#from#those#
built4in#examples
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current"><a href="#tab-1">Tab 1</a></li>
<a href="#tab-1">Tab 1</a>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content"></div>
<div id="tab-2" class="tab-content"></div>
</div>
</div>
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).show();
});

21. We#have#to#dump#a#bunch#of#info#
about#our#DOM#into#our#JS#files:
SELECTORS = {
messages: '.form__messages',
errors: '.form__messages .error',
suggest: '.form__messages .suggest',
wrappers: '.input-wrapper',
userFields: '.input',
submitBtn: '.js-signup-submit'
};
/*#namespaces#have#been#changed#to#protect#the#
innocent

22. What%about%this%bit%of%JavaScript:%
$(".signup-button").click(function(event) {});

23. We're%wri(ng%JavaScript%like%
we%don't%have%control%over%our%
HTML

24. We#think#our#HTML#should#
be#dumb,#but#then#we#have#
to#do#all#sorts#of#shit#in#JS#to#
make#up#for#it

25. So#what#happens#when#we#re-
introduce#some#declara4ve#a6ribtues#
to#our#HTML?
2009:%Meet%Angular.js

26. <a href="" ng-click="archive()">archive</a>

27. Angular's*HTML*made*a*lot*of*people*
very*angry
<a href="" ng-click="archive()">archive</a>
"I#don't#like#how#it#breaks#the#separa4on#between#
html/js/css"
"I#hate#the#way#the#HTML#looks"
"Isn't#this#a#step#backwards???"
!!"some"nerds"on"twi-er

28. <a href="" ng-click="archive()">archive</a>
OMG$separa*on$of$
concerns
I"have"a"lot"of"things"to"say"about"
this

29. <a href="" ng-click="archive()">archive</a>
OMG$inline$event$
handlers
• it's&ok

30. <a href="" ng-click="archive()">archive</a>
But$it$looks$bad$and$you$should$feel$
bad
• no

32. If#we're#ok#with#this#then...
..."let's"slide"down"this"slippery"slope

33. Make%up%your%own%declara0ve%
a2ributes
<button onClick="openModoal()" modal-target="#salesModal">Open</button>
Make%up%your%own%declara0ve%
elements
<modal-trigger-button target="#salesModal">Open</modal-trigger-button>

34. Welcome'to'the'future'it'is'
called'web'components

35. What%are%Web%Components?
• Custom(elements
• Shadow(DOM
• templates
• HTML(imports

36. An#example:#tabs,#a#be/er#way.
<demo-tabs>
<demo-tab title="Tab 1">Tab 1 content</demo-tab>
<demo-tab title="Tab 2">Tab 2 content</demo-tab>
</demo-tabs>

37. <template id="template">
<p>Spooky shadow DOM</p>
</template>
<script>
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var t = document.querySelector('#template');
var clone = document.importNode(t.content, true);
this.createShadowRoot().appendChild(clone);
}
}
});
document.registerElement('demo-tabs', {prototype: proto});
</script>
<demo-tabs></demo-tabs>

38. Also%cool:%composability
<fancy-toggle active={{drawerVisible}}>Open Drawer</fancy-toggle>
<animated-drawer shown={{drawerVisible}}>
Things in a drawer
</animated-drawer>

39. OKAY%I%WANT%SOME%WEB%
COMPONENTS%GIVE%ME%
SOME%WEB%COMPONENTS

40. ...it's&a&li)le&bit&complicated&right&now.&
Browser'support'for'these'specs'is...'not'great.'YET.'

41. BUMMER
There's'some'op+ons'though

42. Polymer
www.polymer*project.org/

43. <paper-tabs selected="{{selected}}">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
<core-pages selected="{{selected}}">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</core-pages>

44. The$philosophy$behind$
components$has$spread$to$a$
framework$near$you

45. Angular
Direc&ves
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
{{tab.content}}
</tab>
</tabset>

46. Ember&COMPONENTS
{{demo-tabs}}
{{demo-tab title="Tab 1"}}Tab 1 content{{/demo-tab}}
{{demo-tab title="Tab 2"}}Tab 2 content{{/demo-tab}}
{{/demo-tabs}}

47. React.js
React.createClass({
render: function() {
return (
<Tabs>
<Tabs.Panel title='Tab #1'>
<h2>Content #1 here</h2>
</Tabs.Panel>
<Tabs.Panel title='Tab #2'>
<h2>Content #2 here</h2>
</Tabs.Panel>
</Tabs>
);
}
});

48. Declara've)data,binding)libraries
Twine.js/knockout.js
<input bind="color" type="text">
<p>You selected <span bind="color"></span></p>

49. The$JavaScripts$of$
the$future
• rather'than'going'back'and'
forth'between'dumb'but'
specific'markup'and'JS'with'a'
lot'of'DOM'querying
• you'll'be'going'back'and'forth'
between'wiring'together'
components'and'tweaking'
their'implementa@ons

50. The$limits$of$declara0ve$
programming
• A#lot#of#this#is#big#wins#for#produc4vity#and#
developer#happiness
• but#if#declara4ve#programming#was#perfect#we#
wouldn't#s4ll#be#wri4ng#C#et#al
• some4mes#you#need#to#tweak#the#implementa4ons

51. Let's&do&a&demo

52. ~!DEMO!TIME!~

53. In#Summary
the$"Declara+ve$renaissance"$of$the$web$is$
coming$whether$you$like$it$or$not
• Angular)is)doing)it
• Ember)is)doing)it
• React)is)doing)it
• The)browsers)themselves)are)doing)it

54. But$you're$going$to$like$it
• declara(ve*APIs
• Meaningful*HTML
• encapsula(on*(styles*too*in*the*na(ve*spec)
• re?usability
• composability

55. Choose&your&own&adventure
• Angular)direc.ves
• Ember)components
• React)components
• Polymer
• Na.ve)(Coming)Soon(ish))

56. You're'going'to'"pollute"'your'
HTML'and'you're'going'to'
like'it

57. Links
• The%state%of%web%components
• Declara4ve%vs%impera4ve%programming
• Our%best%prac4ces%are%killing%us
• The%web's%declara4ve,%composable%future
• Angular.js
• Angular%2.0

58. • Ember.js
• Ember*road*to*2.0
• React.js
• Polymer
• Web*Components