רועי פלד

HOW I LEARNED TO
STOP WORRYING AND
LOVE JAVASCRIPT

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

Chapter 1:
The left-pad catastrophe

In 2010 Isaac Z.
Schlueter
created NPM
And everything changed

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

“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/

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

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

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

node
babel
react
☠

☠
☠
☠
☠

☠
☠
☠
☠
☠
☠
☠
☠
☠
☠ ☠ ☠
☠
☠
☠☠
☠
☠
☠
☠

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;
}

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

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

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

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

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

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

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

And then some build automation...

And now, we don’t even write Javascript anymore

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

Chapter 3:
When you regret choosing Front End Development

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

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

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

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

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

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

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...

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...

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...

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

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 ”

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

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

2) Feeling the pressure to learn every piece of
new technology
💩

3) Frustrating yourself with the lack of
knowledge
😩

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?

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

2) Trying to learn every new technology

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

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

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

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.

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.

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.

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

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/

Front end development is
freaking hard

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

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.

רועי פלד

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to רועי פלד

Similar to רועי פלד (20)

More from Netcraft

More from Netcraft (20)

Recently uploaded

Recently uploaded (20)

רועי פלד