JavaScript Patterns for 2017 - Scott Allen

[@djpunisha29]

this was a really good talk, this guy is clear and concise on the point, unlike all the other JS ninjas who are just talking too fast and rambling on and on ....

[@sgwatyt]

Scott has long been a developer advocate in the c#/.net community and within the past few years has really started blogging/speaking to the js community. His talks where he combines the two are also great.

[@warrenbuckley3267]

He has some good courses on PluralSight for both C# and Javascript

[@jahilkhalfe]

100%!!

[@billott2028]

Thank you for presenting the well understood OOA/OOD concepts in rudimentary JavaScript ecosystem. Computer Science educators should take note.

[@sne4ky647]

Seeing this in the recommendation is so sad😢 , God bless your soul Scott

[@MyronNetterlund]

Love the comments at 53:50 regarding Jasmine & integration-testing. Thank you for sharing your experience. "...a lot of the components that we write, they are orchestra-tors..." 54:33

[@piq-dg3vz]

About the ../../eternity of dot dot slash, instead of doing that you can leverage native node modules like process, path, and __dirname

[@CarneAsadaFries_]

Feels like I'm learning AS3 all over again. Classes, private functions and variables. Modules are essentially Sprites or Movieclips.

[@danialkalbasi]

A very true point for mocking other services in unit testing. We should do more integration tests!

[@serenity_zero]

webpack 2 is out, btw. (the video features webpack 1, which has some incompatibilities, like 'loaders' instead of 'rules')

[@jerrysaravia]

He mentioned that in his video. I found the pattern of multiple webpack configs interesting. Gonna try that.

[@serenity_zero]

indeed, he mentioned webpack 2 at 13:40. I missed that.

[@sobanya_228]

He uses webpack 2 already.And mentions incoming 2.2

[@LarsRyeJeppesen]

Webpack 3 is out :)

[@RashidOmar]

Webpack 4 is out. Just saying.

[@user-ge2vc3rl1n]

@29:00 One of my interview questions for a frontend job actually asked me about how to make frozen js objects with properties/functions inside. Took me off guard for sure

[@modolief]

3:51 -- exports and imports -- excellent overview.

[@PanagiotisKouretas]

Pure magic. Typical Alan Rickman...

[@formerastronaut]

Sometimes I wonder if this paradigm of breaking everything up into modules and then smooshing them all back together with a bunch of extra steps and bundlers is actually worth it.

[@Scorp1u5]

Focusing on gzip size is not a good idea. The files are transferred over the network with a MTU of 1500 bytes. All of your files except the smallest and largest are +/- 1 MTU from the average, meaning that excluding the outliers the transfer time is the +/- 1 packet. people forget that TCP packets are more like block devices than character devices at the low level. I'd focus purely on the execution time because that will have the largest impact on the user.

[@datpip]

I had no idea the class keyword doesn't hoist. Good to know.

[@gggvvvnnn]

Given how you're basically using Gulp as a proxy to CLI, you might try just using npm scripts instead.

[@maxtream9388]

While I agree.. You sometimes need to do some weird things with files. And it's better to do so with language that you know, which is javascript. Because with scripts and using CLI you need to adjust to Windows/Linux sometimes. With gulp it's only javascript. But if you don't need some weird custom manipulations, I agree, go full npm/yarn scripts.

[@gggvvvnnn]

That makes sense. I personally start with UNIX one-liners for my npm scripts, and if I need something more complex I just invoke an external Node script and use ShellJS if needed.

[@politicalvegan]

I was always told to write my programs so that variable names and function declarations where as descriptive as possible to what the underlying behavior is doing so that it was as easy as possible for the human to understand what was going on... since these abstractions aren't adding anything that wasn't already there, I would argue they are trying to do the exact opposite... obviously not everything in this talk fits into what I'm referring to, like async/await is something that adds what wasn't already there but stuff like => or ...!!data ? data : {default:true} aren't adding anything new, its just an abstraction of what could've been written in the same Javascript you learned in the first two weeks. If you prefer condensed reading, perhaps chunk up your code into a function or get a better editor that helps with condensing code instead of trying to evolve Javascript into a different language. To be completely honest, I think the philosophy should be that, if you're using abstractions that don't add anything new, you're considered a less ideal programmer.

[@politicalvegan]

you can see ...!!data ? data : {default:true} at 39:20 this and that has always worked perfectly fine for me, just because something behaves differently than the default behavior doesn't mean that something is actually contributing that wasn't already there (aka behavior could have been altered by the programmer)... opinions on aesthetics isn't a good justification (especially in the context of Javascript) for making things needlessly inundated with details that aren't adding anything substantial... what that does do is make the entire thing *appear* to be less accessible

[@WateryIce54321]

"using abstractions that don't add anything new"? I hope you're aware of how subjective that is. What does C add to assembly? Well for one, it's simpler to reason about. Likewise, what does a short-hand lambda notation (=>) add to Javascript? It encourages a declarative programming style and reduces the amount of irrelevant code that we must read. There's a difference between being verbose and being descriptive. And the reason that ...!!data seems bad is because it is bad. One of the quickest ways to tell is when you can't look at the code and read it out as a simple, English statement. `user_age > 90 ? "old" : "young"`, does the ternary operator still seem that unreasonable? It throws people the first time around, but is easily understood afterwards and pays off by reducing control flow clutter.

[@eggwaffle]

My god people really just don't like learning do they? Your example doesn't even work as arrow functions have lexical scope as opposed to the function keyword.

[@oliver1833]

Was thinking the same thing re: arrow functions. Plus there's the point that => should be read as a function, and so isn't necessarily less descriptive to a JavaScript programmer. If there was ==>, =/> and =?> as alternative iterations, the point would be more valid. Jacob Edwards does have a valid point in the wider scheme of things - there is a lot of condensed function in JavaScript that is not informative. A good talk on it here: kzbin.info/www/bejne/oqDNZHaCfdSpqpI

[@atbureau]

The IIFE at 2:15 is written incorrectly, no? I thought the first pair of parentheses encloses the function and the second pair of parentheses is outside the first - calling the expression.

[@omg_look_behind_you]

i believe either works, but your method is the preferred one.

[@crdhdxyz]

it is written properly. if there is a bracket opens before the function, js treats it as an expression

[@abdullahalmehedi6046]

any link for slides?

[@idmontie]

Won't modules exports be mutable by the current standard?

[@MrShibaMX]

2017 managing JS dependencies... still kind of a mess surprise surprise, am I right?

[@seccat]

Great video. I'm watching for the fourth time. @3:10 What's a IFFE? I think you meant "Immediately-Invoked Function Expression" (IIFE)

[@xdev1090]

You should still wrap strict code in iifes to guard against bundling with non-strict code.

[@corlaez]

I would love to see parcel bundler in "toolchain can impact performance"

[@aziaev]

well structured presentation

[@dean6046]

Thank you! Awesome talk

[@PamirTea]

Very informative talk, thank you.

[@fuu812]

Very good presentation

[@MZDisaster]

RIP Scott Allen :(

[@pentalite5]

Hey NDC, I love what you do and the videos you guys produce. I have transitioned over to a web developer role over the past year and have found your video's incredibly helpful. My company is going through a big promotional phase. I would love to thank you and bring you some value with a free license to our software screen casting software (Screencastify). lmk.

[@parthi2929]

Are these already into nodejs?

[@NZRBeats]

You can use them with transpilers(aka Babel)

[@PhillipKerman]

Great! Filled in many loose ends for me.

[@olegsirbu2]

thanks, very cool talk!

[@ahmedelwa2000]

Your are missed, Scott :))

[@ljklj719]

The first snippet of code is wrong. Wtf

[@erbse1178]

JS in general is on a good way. But even with this newest TS and stuff, seems to me, that the code still is ugly and full of pitfalls to be aware of. Hope this gets much better in the future....

[@MrYerak5]

its like watching the history channel

[@user-iu1xg6jv6e]

OMG, Professor Snape!

[@alexjumba]

brilliant!!

[@gyrogojo]

Great Talk! BTW does not this guy look/talk like American pablo escobar from Narcos :D

[@eloceano3829]

Let me add one more pattern: Global state management. I would recommend MobX over Redux. MobX is much more simple due its OOP structure and small API, instead of adding lots of indirection and bolierplate needed by the functional paradigm used in Redux. Note: I have nothing to do with MobX. Just a personal preference.

[@LQRCerberus]

why is my name on this?

[@youngd8445]

thks

[@calebprenger3928]

I started watching this video, and every year there has to be some genius that states "everything you know is different now". Yet Javascript is still Javascript. Next Video.

[@eggwaffle]

I hope you're not as stupid as you sound

[@foobarbecue]

"javascript. heheheh."

[@kenichimori8533]

The voice 0 JavaScript c = p Control Point.

[@neutraltakes2134]

Thumbs up if you knew all of these in 2016!

[@Ken-S]

This talk is "too old" now

[@floverdevel]

Arrow functions are so bad :(

[@betottogonzalez7791]

kzbin.info/www/bejne/fqewlqB3nLSqbKs .

[@eggwaffle]

How, exactly?

[@rizwanmahmud93]

Rip

Every second sentence has a word ‘problem’. Javascript mess keeps growing.

[@cupajoesir]

Javascript ... ya ...

[@CTimmerman]

Imho, Npm > Brunch > Webpack > Gulp > Grunt, Stylus > Sass > Less, Pug (aka Jade) > HTML, and Python > CoffeeScript > JavaScript.

Stopped watching at ...!!data ? data ...

[@realwizardry834]

This guy's breathing is very distracting

[@webosm6494]

So this is more a how to use the new features using tools talk. Not so much about using javascript directly, which seems is slowly becoming a dying art.

[@seccat]

Great video. I'm watching for the fourth time. @3:10 What's a IFFE? I think you meant "Immediately-Invoked Function Expression" (IIFE)