1.
HOW I LEARNED TO
STOP WORRYING AND
LOVE JAVASCRIPT

2.
First, a bit about myself
Roy Peled
● Front end developer for 10+ years
● Working as a front end developer lead at Folloze
● Lecturing front end development course at Netcraft

3.
Chapter 1:
The left-pad catastrophe

4.
In 2010 Isaac Z.
Schlueter
created NPM
And everything changed

5.
From download To Install
> npm install jquery
> npm install bootstrap
> npm install angular
package.json:
{
dependencies: {
jquery: “3.1.0”,
bootstrap: “3.3.7”,
angular: “1.5.8”
}
}
> npm install

6.
❤
️

7.
“Every month, more than 4 million
developers use npm to find, share, and reuse
code — and assemble it in powerful new
ways.”
● https://www.npmjs.com/

8.
Fast forward to 26th of March, 2016
WHEN THE INTERNET BROKE
For front end developers

9.
LEFT-
PADhttps://www.npmjs.com/package/left-pad

10.
Left-pad dependencies
13,640 downloads in the last day
68,264 downloads in the last week
302,245 downloads in the last month
left-pad
node
babel
react

11.
Left-pad dependencies
13,640 downloads in the last day
68,264 downloads in the last week
302,245 downloads in the last month
node
babel
react
☠

12.
Left-pad dependencies
13,640 downloads in the last day
68,264 downloads in the last week
302,245 downloads in the last month
☠
☠
☠
☠

13.
Left-pad dependencies
13,640 downloads in the last day
68,264 downloads in the last week
302,245 downloads in the last month
☠
☠
☠
☠
☠
☠
☠
☠
☠
☠ ☠ ☠
☠
☠
☠☠
☠
☠
☠
☠

14.
☠

15.
module.exports = leftpad;
function leftpad (str, len, ch) {
str = String(str);
var i = -1;
if (!ch && ch !== 0) ch = ' ';
len = len - str.length;
while (++i < len) {
str = ch + str;
}
return str;
}

16.
Chapter 2:
You know, it’s all about the tech

17.
In 2005, a new term was created in a blog
post
Asynchronous
JavaScript + XML
http://adaptivepath.org/ideas/ajax-new-approach-web-applications/

18.
But we are lazy.
(not that there’s anything wrong with that)
var req;
function loadXMLDoc(url)
{
// branch for native XMLHttpRequest
object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange =
processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new
ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange =
processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
http://www.xml.com/pub/a/2005/02/09/xml-http-request.html

19.
SO HERE COMES THE FRAMEWORKS

20.
In 2006 we had these toolkits
Bitkraft
sarissa.js
http://www.javaworld.com/article/2072153/web-app-
frameworks/ajax--dawn-of-a-new-developer.html
jQuery

21.
In 2009 we ❤️templates
template
jQote Srender
Tempest jQuery
Templating Plugin
NANO

22.
In 2011 MVC was all the rage or MVP, or MVVM
Spine

23.
In 2013 we hate MVC but love components but also MVC!

24.
And then some build automation...

25.
And now, we don’t even write Javascript anymore

26.
So, if we have to choose
1 toolkit,
1 template engine,
1 MVC framework,
1 automation tool
and 1 language to work on...

27.
31,850
Permutations

28.
💩

29.
Chapter 3:
When you regret choosing Front End Development

30.
The Front End
world is moving
fast.
Every 3 years the Front End
ecosystem changes almost
completely.

31.
For Example, 2014
Angular + Scss + jQuery + NPM + Grunt
https://medium.com/@rogerdudler/front-end-technology-stack-survey-2014-809f7a8c92f3#.vpi8xqd14

32.
And in 2015
Angular + Sass + jQuery + NPM +
Bower + Browserify
https://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results

33.
2016
React + Redux + ES6 + Babel +
Webpack + NPM

34.
2017?
Angular 2 + RxJS + Typescript +
Webpack + NPM

35.
I’m a developer working 3+ years
on the same project,
with the same technology.

36.
And when I meet
co-workers, these
are the questions
I’m often asked
“ Have you tried Aurelia yet? It’s
supposed to be better than
Angular! ”
Umm.. I heard of it...

37.
And when I meet
co-workers, these
are the questions
I’m often asked
“ How did you solve static assets
with Webpack? ”
Well, we still use rails as a build tool where I work...

38.
And when I meet
co-workers, these
are the questions
I’m often asked
“ So.. Flux, Reflux, Redux or RxJs? ”
I still didn’t get to look at React yet...

39.
And when I meet
co-workers, these
are the questions
I’m often asked
“ You have to try ES7 decorators! ”
:(

40.
So, frustration sets in
“ I’m not learning as fast as the industry is moving ”“ I’m not learning as fast as the industry is moving ”

41.
😩

42.
Chapter 4:
Redemption

43.
There’s a way to live with the
pace of our industry

44.
I talked about 3 extremes
1) Running to quick solutions without knowing
the consequences
☠

45.
I talked about 3 extremes
2) Feeling the pressure to learn every piece of
new technology
💩

46.
I talked about 3 extremes
3) Frustrating yourself with the lack of
knowledge
😩

47.
1) Running to quick solutions

48.
Decide if it’s really necessary
● Do you really need a new dependency for 11 lines of
code?
● Is it something that you can easily accomplish yourself?
● Are you being overly lazy?

49.
Vet the new dependency
● What’s the size of the dependency?
● How many dependencies you inherit from it?
● How many people are using it?

50.
2) Trying to learn every new technology

51.
Tech inflation has a cost
● We need to keep up or be left behind
● Pressure to learn every new and shiny piece of code
● Most of the tech will be abandoned in a few years
Most of us can’t devote the time and energy to be that Superstar Developer

52.
So don’t.
Either learn wide

53.
So don’t.
Or (preferably), learn
deep

54.
So don’t.
Don’t expect to have both

55.
If you choose the wrong tech, it’s not a big
deal
● More knowledge and experience is never a bad thing
● You can always learn something new
● The fact that it’s abandoned, doesn’t mean it doesn’t work
The most important thing to learn is methodology.
Tech will always be replaced, but your skills are
here to stay.

56.
3) Frustration

57.
Not everyone can be a superstar
● We’re human beings
● We want to come home to relax, not burn myself by working more
● We have our job responsibilities, that sometimes limits our self growth
But that doesn’t mean we’re not good.

58.
Feeling of inadequacy
Our industry is changing rapidly.
We want to learn everything.
There’s no time to do that.
We see the community advancing, talking about tech that we haven’t heard of.

59.
Don’t let the industry and the community make
you feel inadequate.
Vice versa, use it.

60.
Use the community
● Read blogs and news about our industry
● Listen to podcasts on your way to and from work
● Follow industry leaders on social media
● Attend conferences
● Go to meetups
https://uptodate.frontendrescue.org/

61.
To wrap it up

62.
Front end development is
freaking hard

63.
Thank you.
● The environment is complex and breaks
easily
● There are tons of technologies to choose
from
● There is a pressure to be familiar with
everything

64.
So...

65.
Thank you.
● Be mindful of code you’re using for your
projects
● You can’t learn everything, choose
something, and enjoy it.
● Use the community to expand your
horizons, not to drag you down.