7 Secret Patterns Vue Consultants Don’t Want You to Know - Chris Fritz

[@aquavitale3551]

Oh my goodness this is the most cheerful speaker I've ever seen

[@rajikkali2381]

Would love an updated 2022 version of this talk!

[@JeremyAndersonBoise]

Your energy is great, and there are some very slick patterns in there.

[@microcipcipcip]

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

[@MarkoBolliger]

awesome thanks

[@travelmoustache]

Yeah that's the top tip. Amazing one actually

[@HardwareAddiction]

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.

[@mxd8]

more details please @hardwareaddiction

[@s4ndeep1203]

Two years later, i still come back and learn new stuff from this video

[@andrewkiminhwan]

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]

Yeah, any clue how he achieves those transitions? Must be a JS slideshow lib like reveal.js right?

[@rsletta]

@@poolkrooni Apple Keynote -> Magic Move transition. Keynote file can be downloaded at github.com/chrisvfritz/7-secret-patterns/blob/master/slides-2018-10.key .

[@reneeschke]

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()`?

[@reneeschke]

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.

[@ozanmuyes]

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.

[@KidJV]

28:26 where to put the missing quote at $attrs?

[@davetarantula5851]

Transparent Wrappers tweak changed my life :D a big big big thumb up on that guy

[@c01nd01r]

github.com/chrisvfritz/7-secret-patterns www.patreon.com/chrisvuefritz

[@jacobgoh3751]

Thanks for the slides !

[@AndrewCampbell123]

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

[@vedovelli]

Simply awesome! Thanks a lot!

[@rodolfoazevedo4082]

Vlw Vedovelli, vim aqui porque você linkou, achei muito show :D

[@fille.imgnry]

Amazing! First time I got some ”ahaa” moments since started with Vue, thx!

[@logang865]

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?

[@adammenczykowski]

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 😂

[@HardwareAddiction]

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.

[@2002budokan]

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?

[@Bcbweb]

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

[@2002budokan]

@@Bcbweb Try Svelte

[@dmitrysemenov775]

Learnt something new, worth watching

[@mxnalaka]

This this amazing, wish I knew these tricks earlier. thank you!

[@SvingitGolf]

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"

[@FelipeBlini]

awesome, thank you!!

[@lathif-theruby958]

I like his t-shirt... can have one ? please send to Bandung , Indonesia

[@dalsegno1251]

Mind blasting!

[@felisio3]

Thanks!!!

[@jeticebane2042]

27:47 "data.dickpic"

[@_the_one_1]

Wow you are awesome!!!

[@CherPsKy]

Good on the Killer Instinct joke. :p

[@spoonjeee4785]

great! thx man

[@jonnyso1]

This brought me so many bad memmories that now I realise I had no idea what I was doing.

[@mrmnmly5994]

Awesome talk! Thanks for sharing!

[@HardwareAddiction]

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/

[@marcelmueller1982]

I‘m not a friend of globals. Explicit is better than implicit. And what about globals in Unit Tests? Global Mocks?!

[@gamenetic6426]

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 ?

[@takeoffpermitted]

mindblowing 🤯

[@posva13]

I don't know what I was looking at either lol, probably people moving on the other side

[@shekelc42210]

Looks like a nice guy

I'm here because of he Vues on Vue podcast where Chris is now a Panelist! devchat.tv/views-on-vue Fantastic talk!

[@122223333111]

Nice mohawk bro

[@TheMaleCraft]

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.

[@takeoffpermitted]

🤯

[@splintzful]

Of all the things that should be demonetized on youtube clickbait titled shit like this tops the list