search

lmiller1990 / design-patterns-for-vuejs-source-code

Soure code for my book "Design Patterns for Vue.js": https://lachlan-miller.me/design-patterns-for-vuejs
126 stars 28 forks source link

2023 update - Pinia, Script Setup, TypeScript, all the things #8

Closed atilkan closed 1 year ago

atilkan commented 2 years ago

Can you update the examples to use Pinia?

lmiller1990 commented 2 years ago

Yep, I'm going to do a full update soon.

As for typos - appreciate the intent, but the book text is not open source (or it would be hard to justify charging for it).

atilkan commented 1 year ago

Is there any progress on this? Can we help on some of it?

Possible updates i can see based on update-deps branch.

lmiller1990 commented 1 year ago

My main concern is I need to update the book to be 1:1 with all code examples, which is why I'm hesitant to pan this off to the community (it's a paid resource, after all).

I'd also like to add some more content to the book, and improve existing content, at the same time.

I do appreciate the motivation and support!

lmiller1990 commented 1 year ago

I will try and get this done by end of the year and release the second edition in Jan 2023!

My hold up is I want to change some content - I don't think the props validation chapter is very relevant anymore, now that TS and <script setup> is so widely used.

lmiller1990 commented 1 year ago

Sorry folks, got delayed, this is happening now, ETA March. This was more work than expected:

eduvv commented 1 year ago

Will this be available as a free upgrade to the current book or as a separate purchase? Seeing as I just bought it :s

lmiller1990 commented 1 year ago

Yes you will get any and all updates for free forever, including a new cover with different colors and a shiny "second edition" label.

atilkan commented 1 year ago
  • I wonder if Testing Library is still the best option? Either way, I'd like to recommend Vitest, it's fast ⚡

I believe we still need to use something(Testing Library) alongside Vitest for dom things.

lmiller1990 commented 1 year ago

Sure thing.

I'll post my progress here :) happy to take additional suggestions. Intended updates, goal is release in last week of March.

Cover: new color scheme.

Content:

Chapter - PROPS

Move to TS + script setup. I don't think discussing runtime validation of props makes much sense anymore - the standard is TS now. I think the rest of these examples are useful though.

Chapter - EVENTS

TS + script setup. I'd like to show how to test without using emitted() - by wrapping with another component. More examples and recommendations around testing events.

Chapter - FORMS

TS + script setup. The rest seems fine.

Chapter - API-REQUESTS

TS + script setup. Pinia. Also introduce Cypress as an alternative - especially the awesome cy.intercept().

Chapter - RENDERLESS-COMPONENTS

TS + script setup. Maybe point to Headless UI for more complex examples.

Chapter - RENDER-FUNCTIONS

defineComponent and setup and TSX. Point out limitations of Script Setup (cannot use render function).

Chapter - PROVIDE-INJECT

TS + script setup. Reference Pinia/Vue Router source code for how they use Provide/Inject?

Chapter - TRULY-MODULAR-COMPONENTS-WITH-V-MODEL

TS + script setup.

Chapter - GROUPING-FEATURES-WITH-COMPOSABLES

TS + script setup.

Chapter - FUNCTIONAL-PROGRAMMING-MUTABLE-VUE

Script setup, show how we can reuse the functional core in a React app without changing a single line.

New Section

lmiller1990 commented 1 year ago

About halfway there - pushing to hit my goal of done by the end of March.

lmiller1990 commented 1 year ago

Almost done... actually waiting for Vue 3.3 so I can include some content about the amazing new generic feature!

https://twitter.com/youyuxi/status/1639919409312710659/photo/1

travisricks commented 1 year ago

Hi Lachlan,

Sorry to nag you, but I'm excited for this new edition. Do you have a new ETA when it will be ready now that Vue 3.3 has been out for a few months?

lmiller1990 commented 1 year ago

I'm sorry for the delay. I welcomed a new family member and naively thought I'd be able to work on a book in the down time (what down time, lol... what was I thinking).

On reviewing the content, I found I wanted to rewrite a lot of the content to make it better - a straight 1:1 port of the existing content with updated code samples would be much faster and easier, but I'm not sure if that's as valuable as a full refresher - eg, using prop validators doesn't make much sense now, TypeScript makes those mostly obsolete. Any feedback / thoughts?

travisricks commented 1 year ago

Congrats on the new addition! The delay is totally understandable.

I'm not sure I have any feedback on how to change the content, but I know personally, I'd appreciate some tips on how to integrate TypeScript into Vue 3.

Do you have a new ETA for the book? Or are you still adjusting to the new work/life balance of having a little one in the house?

Thanks again for the content!

lmiller1990 commented 1 year ago

I am hesitant to publicly commit to a date given my previous failure to deliver what I said I was going to, when I said I was going to. I'm sorry I cannot commit to anything right now.

Definitely happy to answer and random questions anyone has about Vue 3 / TypeScript / content I talked about in my book, you could message me on Twitter or send me an email.

atilkan commented 1 year ago

Sorry to say but i am waiting a new version for a long time. I can't wait anymore. This book is great but outdated. Maybe we can contribute to book and examples. I think this is the only way this book stays relevant at this point considering time issues.

haydenbbickerton commented 1 year ago

This book is great but outdated

Hard disagree. This is a book about design patterns, the code snippets are merely there to demonstrate the concepts behind a pattern. The observer pattern was first published in 1994 with C++ examples,, yet it is still used today in Vue's reactivity system, written in typescript.

Maybe we can contribute to book and examples

I support this idea, if @lmiller1990 is open to pull requests? Also congratulations on the new family member 🎉

haydenbbickerton commented 1 year ago

Also @atilkan, if it helps, I've been using chatGPT to quickly update JavaScript snippets to TS. I can even paste the typescript declarations from the docs page of a VueUse function, and it will start using it in the code output.

Here's an example chat, that first message is my boilerplate containing the main package.json dependencies and specific versions if needed.

atilkan commented 1 year ago

Hard disagree. This is a book about design patterns, the code snippets are merely there to demonstrate the concepts behind a pattern. The observer pattern was first published in 1994 with C++ examples,, yet it is still used today in Vue's reactivity system, written in typescript.

This book is about vue patterns and best practices. They are outdated. Which is the point of this issue. Examples and the book references needs update.

haydenbbickerton commented 1 year ago

Examples and the book references needs update

I'm not disagreeing that a new version of Vue has been released and the examples could be updated to match. I'm disagreeing with your comments about the book not being relevant anymore. He's busy taking care of a new kid, give him a break, all the book's ideas are still applicable in todays frameworks

atilkan commented 1 year ago

I'm not disagreeing that a new version of Vue has been released and the examples could be updated to match. I'm disagreeing with your comments about the book not being relevant anymore. He's busy taking care of a new kid, give him a break, all the book's ideas are still applicable in todays frameworks

I don't think there is a need for defending as i am not trying to do whatever you think i do. I support him fully and explain how the book can stay relevant. I am not discussing if it is relevant or not. As the author agreed it is already outdated and there are things to fix. Another point is that this pr is 11 months old and looks like with the new baby our help can be useful. That is the point here. Stay on the track or not hijack the issue please. My question is for the author. How can we help update the book and examples?

lmiller1990 commented 1 year ago

I can update the source code in this repo in a few hours if that's the issue (but not the book).

One thing I found challenging when authoring the book is keeping the code snippets in the book correct and valid, and the same as in the repository. I've taken courses and read books before where the text says one thing, but the provided code is different, and that is not a great experience.

I agree the book is about ideas / patterns and not specific code examples, but I agree having everything at least on the latest version of Vue and Vite would be good.

It might not be as much work as I'm expecting, let me take another look. Perfection is the enemy of completion, I think I can just bump the dependencies and update the syntax for now. This should help.

  1. Update code here
  2. Port snippets to book with minimum changes
  3. Proofread book

Seems like a good place for me to start.

As for community help, I don't feel too comfortable asking for community help for a paid product, although I am very appreciated and humbled by the thought. I think the best thing was the activity in this thread, which tells me there is still interest on an updated edition of the book 🚀

haydenbbickerton commented 1 year ago

which tells me there is still interest on an updated edition of the book 🚀

Most definitely! The author of Large Scale Vue Apps updates the book about once a year and publishes it as a new edition on leanpub along with the example code on GitHub (Vue2 + vuecli, Vue3 + TS, Vue3 + Vite). These separate editions have been helpful during contract work where every project is a coin toss of Vue 2/3 and JS/TS and Webpack/Vite, etc. I happily buy updated editions, and would jump at the opportunity to fund your ongoing work as well:)

lmiller1990 commented 1 year ago

I put a few hours of time into this yesterday. Some updates...

props and events are basically obsolete now - at the time, TS wasn't good and script setup did not exist. Now they do, there's not much of a reason to talk about props and event validators. I'll find a new way to communicate the concepts in those chapters.

Form validation's design is not TS friendly; I can update this easily. I'll need to rewrite the chapter, no big deal.

Other thing I noticed is testing... Jest is pretty dated. Moving to Vitest was easy, but I really prefer browser based testing now (Playwright, Cypress). I think I'll update the actual examples in the book to use one of those, but have source code showing all the runners for people who prefer a terminal based one.

So the big blockers are two new chapters. I could do a v1.5 that has the existing ones updated, with a note. I will probably make the second edition free, or if I do decide to charge, include a good chunk of new content, too.

I will try spend 1 hour a day on this until it's complete. Knowing there's a lot of interest is very motivating! Happy to entertain ideas for two new chapters, too, if anyone has any struggles - maybe generic components.

lmiller1990 commented 1 year ago

I updated a few chapters today (on my machine, I won't do a email with the latest updates until they are all done). I will periodically post to share my progress. Thanks for the support and patience.

lmiller1990 commented 1 year ago

I updated everything excepts "props" and "events". The concepts presented are still relevant, but with the entire book now using TS, they need some reworking.

I also moved all the code to script setup + TS. I will share just the code soon (actual book still needs more work) just need a few more updates ...

I couldn't decide what test runner to use, so I just added examples using both Cypress and Vitest + Testing Library. I think I will through in Playwright as well, that seems popular. Vitest still seems buggy but it's pretty damn fast.

Finally, I think I will include some appendixes, namely

Ideally this will not take that much longer, I'll keep posting updates here to keep myself accountable. Thanks!

lmiller1990 commented 1 year ago

I finished rewriting events - we now use defineEmits, do a deep dive into the different syntaxes, eg

<template>
  <button @click="count">Count</button>
  <button @click="count()">Count</button>
  <button @click="$event => count($event)">Count</button>
</template>

the differences, how they compile, then look at some other tips and tricks for managing complex event payloads and getting type safety.

I will post this one as a blog post soon and send an email update about the progress. I just need to update one more chapter about props (finally, a chance to use the new generic prop types!) and do a final proof read.

Hoping to keep the momentum going - if anyone has any ideas for more content, now's the time to suggest it 👍

atilkan commented 1 year ago

More ideas may be on another wave. I can't wait to see the current one.

lmiller1990 commented 1 year ago

I decided to share the events content I'm working on for free: https://lachlan-miller.me/articles/emitting-events-best-practices-vue-3 feedback is welcome.

I'm working on generic components now, then something about TS, then I'll just need to update the cover and we are ready to roll.

lmiller1990 commented 1 year ago

I have finished all the content updates and am just proofreading.

I'm also looking to a hard-copy run, but that'll be separate to the free update anyone who bought the first edition will get.

atilkan commented 1 year ago

I can help on proof reading or on any other area.

lmiller1990 commented 1 year ago

Thanks for the offer - I think I've got it covered, but I appreciate the support and enthusiasm 😎

lmiller1990 commented 1 year ago

It's done! Source code updated here, new version published - the 2nd Edition. If you bought it, you should get an email via Gumroad, you can get the latest PDF/epub.

Copy-pasting the notes here:

Hi all,

I have fully updated Design Patterns for Vue.js! A few chapters were completely rewritten. The general ideas and themes remain the same. If you already bought the book, you can just download the latest PDF or EPUB - no need to repurchase.

I'll spend some time marketing this soon, and hopefully make some new content soon!

Changes: