VUECONF US 2019 | Phenomenal Design Patterns In Vue with Jacob Schatz

0:00 Introduction
2:53 Design patterns to solve a problem
3:56 Solution: Builder
9:06 Vuex components are not reusable
9:50 Solution: Command
15:56 3 Commands

[SonnyDarvishzadeh]

when old programmers try to pick up new frontend frameworks

[Andrey-ilrh]

This talk is better be called "How to use Vue without using Vue". Command - Observer pattern is a vivid example: don't use Vuex, don't use Vue SFC, don't use simple elegant solutions that already built into Vue, but instead just write your own bicycles, way to go Jacob 👍 (sarcasm)

[TheAxeForgetsTheTreeRemembers]

This sounded like a lot of complication for few benefits ... if any. Most of this is only going to make the code more obscure and frustrating to read. Especially if you forget to "predict" use cases, which will happen.
Most software can and should be simple, but thanks to this kind of people, we are all flooded with nonsense libraries and their many bugs.

[arminb]

The command pattern is a complete overkill not to mention the bulk load of commands that must be written for a more complex scenario.
I think event sourcing with rxjs would give you the same benefits with less code.

[TheodoreRavindranath]

The undo example would have been more useful if it didn't just update local state. How does the command pattern deal with complex hierarchy of asynchronous tasks?

[TheodoreRavindranath]

The form builder is like pushing all the logic out of Vue back into old OO JS land... not appealing.

[deadleaves]

How about you manage state with vuex and use patterns already well established in component-based libraries? Higher-order components and functions and Vue mixins and plugins instead of monstrous OO patterns. Javascript is think really weird language with lots of gotchas and clunky syntax, but really powerful functional side to it, and lots of these patterns can be replaced with clever use of higher-order functions. There is a reason there isn't Gang of Four book with dozens of patterns for functional languages - you don't need that.
And what I like about Vue is that Vue components are just basically javascript objects with sensible defaults and bunch of functions with properly bound "this". IMO it really hit this sweetspot of being simpler than React, AND having all the same right ideas about components, AND cutting lots of boilerplate code and being simple. I like that and I want to keep it this way.

[kyleagronick]

This all came together in the end when he showed how to impement undo. It really was elegant. If I ever need undo I'll definitly be reaching for this.

[hachiphan]

missing a lot of instruction for formInput and formButton methods.
There are no github to show the code for viewer

[DodaGarcia]

For anyone curious about the magic trick, the secret is that when he quickly points at someone, he then puts his hands back together in a different configuration as before.

[LumbreraEnMiCamino]

where can i buy a book of pattern design in vuejs?

[vaibhavnamburi]

Jason's great, I follow him on twitter and shares some good points. To this video though I have to say I personally don't agree with the first half (form) at all - very clustered, unnecessarily complicated - my goal as a senior dev is to make code as literal and simple as possible (which is extremely hard most times).


The second bit about decoupling components with an event driven eco-system I think holds merit, the implementation of it definitely needs improvement lol but nonetheless, calling this video a "phenomenal design pattern" video would be a stretch

[Andrey-ilrh]

I was always fascinated by people who are obsessed with complex solutions and monstrous code structures. Most of the stuff if not all from this talk is an anti-pattern. And it won't get better if you would call it Phenomenal - it will still suck. Why? Because instead of striving for simplicity those "solutions" will make your code obscure and harder to understand. The more I code the more responsible I am for bringing any kind of additional abstractions to my code.


You know what I like about XML? It's descriptive and one of the main advantages of Vue is that it gives us this power of writing self-explanatory descriptive XML. And I would rather build 10 simple pieces of HTML markup that have different goals then combine all of that into 1 god object that knows how to do everything!


When Jacob showcase the first example of messy forms - to me it's not a call to make things shorter but a sign of bad consistency and absence of a design system in a project. People should have standards in a project for how to name things and when to extend a certain type of components.


If you want to better understand how to refactor project into a good usable code - I would highly recommend a course by Simon Allardice Programming Foundations: Refactoring Code. This guy has tons of experience and really knows what he is talking about.


Always strive for simplicity and you will likely build a great product. Cheers!

[valentinkhomutenko]

21:00

This context thing actually looks like another pattern - Front Controller (Martin Fowler)

[charleswoodruff]

Jacob Schatz should NEVER EVER do a talk...EVER. Tons of irrelevant info and unnecessary tangents that have absolutely nothing to do with the topic...just for a laugh.