Unveiling Qwik 1.0: What You Need to Know!

Qwik 1.0 has been released! Let's celebrate with a tutorial of building a voting application that shows how to use integrations like auth, prisma, and tailwind, as well as Qwik's built in routing, server actions and route actions, to build a voting app.
Code: github.com/jherr/qwik-voting
👉 I'm a host on the React Round-Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with atomic and SpaceMono NF
00:56 Qwik Project Setup
02:03 Adding Integrations
03:02 Adding Authorization
08:28 Prisma Database Setup
12:53 Home Page Buildout
15:43 Setting Up The Page Layout
18:36 Building The Category Page
23:41 Function Properties
26:09 Server Actions
29:07 Creating Signals
30:53 Using Visible Tasks
31:52 Creating Route Actions and Forms

[@AlekVila]

This was great. I hope you'll continue to make Qwik tutorials.

[@bigmistqke]

1.0 is huge. Congrats to the qwik team!!

[@fifty6737]

this framework blows anything i've used or seen out of the water

[@amerrashed6287]

The best clear introduction for qwik yet ! Qwik looks awesome, combining all good features of other frameworks, all in one box!

[@calvinnguyen1451]

Liked and Subscribed. This is one of the best Qwik introduction and tutorials out there!

[@babyboie20]

I really appreciate all of your videos! I always learn so much. I can't lock much of the knowledge into long term memory because I have no practical applications I could use them in, but I always know I can come back and watch again once I find one. Thanks again!

[@IanJamieson]

Qwik honestly looks like it can replace React. I know it takes time, ui libs, community etc, but it looks super polished for a 1.0 and things look cleaner and easier ❤

[@jherr]

I'm a little concerned about the PropFunction thing, that needs to go. There also needs to be migration story. And I think Qwik needs to find an application base to dominate quickly, like content/cms driven apps. And then it can work towards the e-Commerce space.

[@jmnoob1337]

@@jherr Hey Jack, have you come across the "React Qwikify"? Qwik can do two things with React: run a regular old hydrated React app island inside of a Qwik app, so if you had an existing React app it might be one way to start a migration. They also implemented a way to use React component libraries WITHOUT loading React, so it simply renders the JSX, wraps it with a Qwik component as a controller, and now you have React MUI buttons etc inside your Qwik app! I haven't used the Qwikify, but it should be a great help for those who are just looking for UI components for Qwik. And the PropFunction thing is annoying. I wonder if there's a way they could get around that. Qwik needs a way to make sure that both the compiler (optimizer) AND the developers recognize all `$` functions as special, following special rules, because they will be code-split. Do you have any ideas on other ways to handle this?

[@jherr]

@@jmnoob1337 They have a compiler, it should just handle the PropFunction thing behind the scenes. As for the React integration, I've seen it but haven't used it.

[@jherr]

@@jmnoob1337 It's more fundamental that that, as a React dev I just want to send a function, I don't want to think about the underlying mechanics. So having to make a prop as a PropFunction and then wrap the function I send in a $ is just overhead that gets between me and getting my work done. And it's work that I don't have to do in React. In addition, I've taught a lot of folks React and the whole idea of passing functions as properties is in and of itself a big conceptual hurdle (I know it doesn't sound like it to you, but it is for some folks) so adding on this additional stuff is just another barrier to entry. In addition it's not a good look the outside DX standpoint. I can easily see a flamey article that shows React vs Qwik which just goes to town on this and that blowing up on Reddit and becoming the common thinking around the framework.

[@jmnoob1337]

​@@jherr Okay. I do remember when first learning React it was strange and mind-blowing that I could just pass a function in as props! I wonder what could be done about this. For now I see it as a tradeoff, a necessary evil with Qwik. On the other hand, Qwik did manage to simplify some of the other APIs compared to React. Two that I have noticed are: no need to pass a function into `setState` in order for it to update properly (simply directly update the store's property, or the value of the signal), and no need for a wrapper component when creating context (just call the hook in the parent and set up the store, and now any children can have access to the context). I actually found it annoying when switching from using Qwik back to working with React because of the extra code necessary to accomplish these tasks. But either way, Qwik takes some time to get your head around it. It's tough to just "jump in" without first reading multiple pages of the docs or watching some Qwik tutorials/interviews. The Qwik team prides itself in how the compiler just "does the right thing" (regarding reducing the JS required to be shipped to the client, and regarding knowing which functions to run on the server and which need shipped to the client), so hopefully in the future they can improve on the DX so it just "does the right thing" without the dev needing to think about wrapping functions or using specific types.

[@shai_reznik]

Great job Jack! really enjoyed it 👏💪 one small note - I would use setTimeout instead of setInterval Loved the snarky remarks idea :)

[@jherr]

Yeah, fixed that in the code before I posted it.

[@shai_reznik]

@@jherr 💪💪

[@hayatof1]

Love this and honestly just heard about Qwik today (and officially confused me haha). The confusion is as some have said that these frameworks are starting to have similar "ideas" even if it is a little different. I have invested in NextJS and lately been trying to get better with their new NextJS 13 app router which feels to have brought a lot of what Qwik has. Any idea if we would ever get a comparison between NextJS 13 with Quik? or why one might work better than another? Thank you again for all the content you have provided

[@abdessittirharkati7603]

I was waiting for this, Qwik is great!

[@DB-dk2mj]

Gorgeous! Jack and Qwik team! From Russia with love!

[@romanzanettin9425]

great content as always ❤ thx

[@blue_berry_pie64]

btw, your background is so relaxed😊

[@blue_berry_pie64]

Hi Jack, I got the error : Running seed command `ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts` ... An error occurred while running the seed command: Error: Command failed with ENOENT: ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts spawn ts-node ENOENT  ERROR  Command failed with exit code 1: prisma migrate reset I have tried to find solution but it doesnt work. Do you have any suggestion?

[@michaelta05]

Another great video with great content and this time is Qwik! Thank you so much Jack. Just wondering pnpm was initially use to bootstrap the app but then npm was used to run qwik to add prisma and other packages... not sure why so, why not use pnpm all the way?

[@michaeljmeyer3]

Doesn't pnpm create links to prevent bloat? I have not used it much, but I wonder if its functionality is just suited for running locally scoped scripts? Running pnpmi after installing should clear any oddities up, either way.

[@jwickerszh]

Yeah, Qwik v1 !! Nice app example as well, really illustrates well the new loaders / actions. I notice though, not much time was spent on the resumability part of Qwik.. I know, it has been covered a lot before, but it might have been a good idea to do a qwik recap of what separates this from all the other frameworks or/and link to a previous video. I suspect a lot of new people will start here since it just hit v1 and might not have the whole background.

[@jherr]

I've seen one video demonstrating resumability specifically. IMHO, I wouldn't base my framework choice on it. Hydration is become less and less of a factor it seems. I asked recently about the importance of raw performance to web app developers and the majority opinion was that it was not the most important concern when it comes to framework choice.,

[@jwickerszh]

@@jherr Hydration is always a factor, the question might be biased when we are only comparing hydrating frameworks though. Performance in itself is also industry dependent, and since we work in e-commerce it is actually pretty high on the list. So, does it matter for demo web-apps? probably not. But you do get all the performance benefits for free.

[@jherr]

@@jwickerszh I was kinda surprised by the poll result myself. Coming out of e-Commerce it was like, performance is king. But it's a more complicated space now than it was when Qwik was started. For example, Astro can constrain the size of the bundle and hydration substantially with its islands. And NextJS App Router performance is complex because it's delivering a much large payload but still getting better time to interactive than the pages directory because of the smaller amount of client side calculation. BTW, want to say that I am super impressed with Qwik, so don't take this criticism as a write off, I'm just trying to be realistic. I just don't think Qwik will win a ton of supporters on startup speed alone.

[@chaboxx159c]

This is amazing , Thanks Jack.

[@ibrahimmohammed3484]

kevin de bruyne of web development tutorials 😁

[@jherr]

One day I'll have to really look into who that is since I get that a lot.

[@ibrahimmohammed3484]

@@jherr he's a belgium football "soccer" player in Man city team both of you look alike both in face and skills quality😄

[@jherr]

@@ibrahimmohammed3484 Ah yes, I am well known for my corner kick. 🤣 Man city wow, no kiddin', that's the big deal. I knew about Man city before Ted Lasso and I don't even really follow sports.

[@eleah2665]

Framework extravaganza!

[@germandeluca3712]

Can you tell me what extension you use for the file explorer's icon theme?

[@ishakimanuel3513]

love that terminal.

[@JGBSolutions]

Hey thanks for this tutorial! Qwik looks good. Especially with that 1.0 release. And it looks like all the frameworks (Remix, Next, Solid, Svelte and now Qwik) just look alike these days. They copy features and APIs from each other. Though Remix might be a little different.

[@jherr]

Agreed. Qwik has the resumability thing that other frameworks don't/can't have, but outside of that the core features are very similar. I look forward to more and easier integrations.

[@NosherwanGhazanfar]

As Jack has already stated, Qwik's advantage is resume-ability. If you look up hydration vs resume-ability you will get the advantage here.

[@hamatoYogi]

Great video Jack! ❤

[@sobrevivendo-no-front]

WOW! AMAZING!

[@andresquesada6059]

Qwik is amazing!

[@mikekidder]

great "qwik" tutorial. FYI, i ran the prisma/tailwind installs using pnpm and did not get any errors.

[@jherr]

weird, wonder if it's a node version issue.or pnpm vs something else

[@claveralvaro6245]

Yeaaaaah baby !!!!

[@megabaytm]

31:41 probably should be a setTimeout instead (and clearTimeout accordingly) Thanks for video btw!

[@jherr]

Haha, yeah, I fixed that in the code before I posted it.

[@kamichikora6035]

Coming from the mern stack, how can i host on heroku? I really like this framework

[@derSeega]

Hi can anyone tell me if there is free hosting for qwik? Like vercel for nextjs? Thanks in advance

[@heralst]

🎉

[@olduniverse9270]

Great video!. btw, your terminal looks cool, do you have a video about it?

[@jherr]

No, though I probably should at some point. Issue is that I keep changing it. This time it's oh-my-posh with the atomic prompt style on Tabby with SpaceMono NF as the font.

[@frontend3409]

why you first using pnpm, and later npm?

[@AndresJimenezS]

Could you try the microfrontends part for qwik?

[@pro-verstka]

Hi, how did you enable top panel with address bar in Arc?

[@jherr]

It comes up automatically when the URL is localhost.

[@SingularityLabsAI]

Have you deployed it anywhere ? wanted to check the performance.

[@Kamleshsharma35]

Can we have simple example to demonstrate features of qwik? Thanks

[@jherr]

kzbin.info/www/bejne/hJuugHSYjNaCg5Y

[@gonzalooviedo5435]

This is very good, but is very easy to lost how it works due to big letters and a lot of scrolling up and down and is impossible to check the overall code and relation between them

[@shashydass4114]

Great video!

[@adarshvk2125]

Can we integrate other state management library like redux toolkit to qwik?

[@jherr]

I don’t think so and i don’t think you’d need it. Qwik has state management built in specific to its hydration model.

[@mmecaroni]

Seriously.. how do you get your terminal to be so pretty?? lol show me!!! Great tuts by the way!

[@eindbaas]

What zsh theme is that?

[@jherr]

It's oh-my-posh and the theme is atomic.

[@Herxh428]

Fyi one of the creator of qwik is also a creator of angularJs😊

[@jherr]

And Angular, which the Angular folks like to point out is a different framework whenever I lump Angular and AngularJS together. Sigh.

[@Herxh428]

@@jherr isn't angular updated version of angularjs?

[@Herxh428]

@@jherr also the creator of both are same i guess 😅🙄

[@jherr]

@@Herxh428 Far be it for me to tell that story. 🙄AngularJS 1.x and Angular 2+.x are, according to the Angular community, fundamentally different frameworks. FWIW, I honestly though AngularJS died years ago but apparently it was EOL just recently or is soon to be or something.

[@jherr]

@@Herxh428 Haha, right! Which gives even more credibility to the "they are the same" idea. 🤣 I actually was doing stuff on Angular JS 1.5 and was really stung by Angular 2. The migration was tedious, but not difficult. Even at the time I considered them the same thing.

[@erikslorenz]

Until something replaces react I just dont have the bandwidth lol

[@jherr]

Nothing is going to replace React for a while.

[@kklowd]

I fail to see how qwik stacks against other frameworks

[@felipetiagofp]

I came looking for someone saying Nextjs is dead. Please..

[@asimalqasmi7316]

1st

[@atatdotdot]

Prisma: "Cool, database-agnostic ORM..." Also Prisma: "This feature only works on postgres, not on sqlite..." 🤦‍♂

[@enjay86]

Thanks for this summary of Qwik. One BIG NO-NO: 31:38 NEVER set "undefined" to any variable manually. Undefined should stay reserved for JS engine... use other falsy value, like "null".

[@EranRiesenfeld]

You have read my survey response and just made a video out of it 😅 Thank you for this introduction to qwik(city). 🙏🏼

[@franciscokloganb]

Yet another JS framework