What Vue needs asap, is a React "Fragment" feature, so we can write components that only share state, thus without a redundant root element. This way we can take full advantage of the Render prop method, which in Vue was officially announced as "Scoped Slot". In that regard it's actually pretty funny. While Vue realized this and implemented, React has added "Render Props" to their documentation only recently.
ok so I am 6 minutes in, and this is already one of the best developer talks I've ever heard or watched in my life... those transition animations from previous to new boosts! lol
@@poolkrooni Apple Keynote -> Magic Move transition. Keynote file can be downloaded at github.com/chrisvfritz/7-secret-patterns/blob/master/slides-2018-10.key .
Love this video! Will watch again, thank you! Awesome tips and positive outlook. “I’m gonna FIND you and make you learn something if you haven’t” great quote made me laugh 😂
An amazing talk from an amazing person for an amazing framework. I'm delighted and enlighted by the presentation and by the techniques it introduced. And Chris your positive energy is awesome, I wish I had been given 2x like opportunity for this video. Everything aside dark background for the presentation is killer. Thanks man.
I'm confused: Why is `.keys().forEach()` working here? When I apply this to an object or array, I get an error that this function doesn't exist. Is this functionality that comes from webpacks `require.context()`?
Okay, figured it out myself: webpack.js.org/guides/dependency-management .keys() in fact really comes from the require.context() function what also took me a while to get my head around is that require.context() returns a require() function for that specific context AND offers the .key() function on top of that. It then makes total sense, that he starts with requireContext.keys() and then calls the requireContext() FUNCTION inside the .forEach() - cool setup, but hard to decipher for newcomers to both ES6 and webpack.
I knew most of this. Didn't know about `inheritAttrs`, although I did know about `$attrs` long time ago. You can't write a good component without using it. However, using `inheritAttrs: false` on my base component (which all others extend) is a very good practice because it ensures nobody passes down attributes implicitly, which makes the code brittle and unpredictable.
Just a point on Module Registration - I noticed when implementing the directory scraper, that my modules were being added, but everywhere in my codebase that referred to an imported getter/state variable it was erroring. My solution was to add a ".default" after the requireModule(fileName) function call. Just in case anyone should encounter the same fate! modules[moduleName] = requireModule(fileName).default
So how would you access mapActions using the namespace (what would the spread operator code look like) if you extrapolate your modules into the root level?
Great video, and thank you. BUT be alerted: If something needs tips/tricks/tweaks; it should either be redesigned, or requires a new layer to hide all these tips/tricks/tweaks to produce clean and terse code... For example the modules stuff explained in this video. I know the comfort it provides from Quasar. Quasar framework implements this so that I do not need to adjust anything manually. This should be done in Vue from the beginning. Why should I import the modules manually if it can be done automaGically?
This what I was thinking as I watched the talk. It would be better to design an intuitive approach to dealing with these problems rather than needing to know obscure tricks and patterns that will look cryptic to other developers who have to work on the code. These techniques are really useful once you know them, but to be honest, the code is just hacky madness
When I use require.context() to load base components globaly I get a warning that say "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"
Hmm, normally I tend to agree with you. But for components, for instance, it is pretty clear that does not exist an "base-button" html tag, so this wouldn't make it more explicit than implicit ?
Regarding Radical Tweak #2: What you are saying is that Vue breaks on native events, specifically it does not call the native event handler. It breaks but somehow Vue captures that error and keeps it hidden from the developer - then you and Vue decided to spin the fact that this egregious error was hidden by Vue. By calling a Transparent-Wrapper? That is a perfect spin title. Transparent (easy to perceive or detect; clarity) Wrapper (covering for something sold). Yes, sir, you are wrapping the transparency of the situation. That Vue knew about this problem and did not tell it's users, and then chose to spin it with this Radical Hack #2. And called it a Transparent-Wrapper (e.g. Clarity-Concealer). another way to say that is Truth-Hidden. And, a more boiled down version -- a liar.
6 лет назад
I'm here because of he Vues on Vue podcast where Chris is now a Panelist! devchat.tv/views-on-vue Fantastic talk!
So thanks to this, you can now do render-less components. I played with it yesterday and it seems you can't use (Vue 2.5.x) to pass into a slot, it has to be an actual element. Yesterday, this was released: adamwathan.me/renderless-components-in-vuejs/
Oh my goodness this is the most cheerful speaker I've ever seen
github.com/chrisvfritz/7-secret-patterns
www.patreon.com/chrisvuefritz
Thanks for the slides !
Would love an updated 2022 version of this talk!
Your energy is great, and there are some very slick patterns in there.
What Vue needs asap, is a React "Fragment" feature, so we can write components that only share state, thus without a redundant root element. This way we can take full advantage of the Render prop method, which in Vue was officially announced as "Scoped Slot". In that regard it's actually pretty funny. While Vue realized this and implemented, React has added "Render Props" to their documentation only recently.
more details please @hardwareaddiction
Two years later, i still come back and learn new stuff from this video
ok so I am 6 minutes in, and this is already one of the best developer talks I've ever heard or watched in my life... those transition animations from previous to new boosts! lol
Yeah, any clue how he achieves those transitions? Must be a JS slideshow lib like reveal.js right?
@@poolkrooni Apple Keynote -> Magic Move transition. Keynote file can be downloaded at github.com/chrisvfritz/7-secret-patterns/blob/master/slides-2018-10.key .
If you don't have time to watch the full talk, jump to 21:55 to Transparent Wrappers because it is a really really cool tip
awesome thanks
Yeah that's the top tip. Amazing one actually
Amazing! First time I got some ”ahaa” moments since started with Vue, thx!
Love this video! Will watch again, thank you! Awesome tips and positive outlook. “I’m gonna FIND you and make you learn something if you haven’t” great quote made me laugh 😂
An amazing talk from an amazing person for an amazing framework. I'm delighted and enlighted by the presentation and by the techniques it introduced. And Chris your positive energy is awesome, I wish I had been given 2x like opportunity for this video. Everything aside dark background for the presentation is killer. Thanks man.
Transparent Wrappers tweak changed my life :D a big big big thumb up on that guy
I'm confused: Why is `.keys().forEach()` working here? When I apply this to an object or array, I get an error that this function doesn't exist. Is this functionality that comes from webpacks `require.context()`?
Okay, figured it out myself:
webpack.js.org/guides/dependency-management
.keys() in fact really comes from the require.context() function
what also took me a while to get my head around is that require.context() returns a require() function for that specific context AND offers the .key() function on top of that. It then makes total sense, that he starts with requireContext.keys() and then calls the requireContext() FUNCTION inside the .forEach() - cool setup, but hard to decipher for newcomers to both ES6 and webpack.
Simply awesome! Thanks a lot!
Vlw Vedovelli, vim aqui porque você linkou, achei muito show :D
I knew most of this. Didn't know about `inheritAttrs`, although I did know about `$attrs` long time ago. You can't write a good component without using it. However, using `inheritAttrs: false` on my base component (which all others extend) is a very good practice because it ensures nobody passes down attributes implicitly, which makes the code brittle and unpredictable.
Just a point on Module Registration - I noticed when implementing the directory scraper, that my modules were being added, but everywhere in my codebase that referred to an imported getter/state variable it was erroring.
My solution was to add a ".default" after the requireModule(fileName) function call.
Just in case anyone should encounter the same fate!
modules[moduleName] = requireModule(fileName).default
This this amazing, wish I knew these tricks earlier. thank you!
So how would you access mapActions using the namespace (what would the spread operator code look like) if you extrapolate your modules into the root level?
Learnt something new, worth watching
Great video, and thank you.
BUT be alerted: If something needs tips/tricks/tweaks; it should either be redesigned, or requires a new layer to hide all these tips/tricks/tweaks to produce clean and terse code...
For example the modules stuff explained in this video. I know the comfort it provides from Quasar. Quasar framework implements this so that I do not need to adjust anything manually. This should be done in Vue from the beginning. Why should I import the modules manually if it can be done automaGically?
This what I was thinking as I watched the talk. It would be better to design an intuitive approach to dealing with these problems rather than needing to know obscure tricks and patterns that will look cryptic to other developers who have to work on the code. These techniques are really useful once you know them, but to be honest, the code is just hacky madness
@@Bcbweb Try Svelte
28:26 where to put the missing quote at $attrs?
When I use require.context() to load base components globaly I get a warning that say "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"
awesome, thank you!!
Mind blasting!
Thanks!!!
great! thx man
I like his t-shirt... can have one ?
please send to Bandung , Indonesia
Awesome talk! Thanks for sharing!
Wow you are awesome!!!
Good on the Killer Instinct joke. :p
This brought me so many bad memmories that now I realise I had no idea what I was doing.
I don't know what I was looking at either lol, probably people moving on the other side
I‘m not a friend of globals. Explicit is better than implicit. And what about globals in Unit Tests? Global Mocks?!
Hmm, normally I tend to agree with you. But for components, for instance, it is pretty clear that does not exist an "base-button" html tag, so this wouldn't make it more explicit than implicit ?
mindblowing 🤯
Regarding Radical Tweak #2: What you are saying is that Vue breaks on native events, specifically it does not call the native event handler. It breaks but somehow Vue captures that error and keeps it hidden from the developer - then you and Vue decided to spin the fact that this egregious error was hidden by Vue. By calling a Transparent-Wrapper? That is a perfect spin title. Transparent (easy to perceive or detect; clarity) Wrapper (covering for something sold). Yes, sir, you are wrapping the transparency of the situation. That Vue knew about this problem and did not tell it's users, and then chose to spin it with this Radical Hack #2. And called it a Transparent-Wrapper (e.g. Clarity-Concealer). another way to say that is Truth-Hidden. And, a more boiled down version -- a liar.
I'm here because of he Vues on Vue podcast where Chris is now a Panelist! devchat.tv/views-on-vue
Fantastic talk!
Looks like a nice guy
So thanks to this, you can now do render-less components. I played with it yesterday and it seems you can't use (Vue 2.5.x) to pass into a slot, it has to be an actual element. Yesterday, this was released: adamwathan.me/renderless-components-in-vuejs/
Nice mohawk bro
27:47 "data.dickpic"
🤯
Of all the things that should be demonetized on youtube clickbait titled shit like this tops the list