Alpha preview: Modern JavaScript in Rails 7 without Webpack

Modern web apps without JavaScript bundling or transpiling: world.hey.com/...
Rails 7 minus Webpack plus importmap PR: github.com/rai...

[@portlime]

The time of endlessly waiting for webpack re-compiling is over. This is great.

[@adriantomole1019]

I only used that feature only when I continued the work of other ppl. Glad I can get rid of it.

[@lulakales]

Try vite ruby, you don't need to wait!

[@sadiqmmm]

Unbelievable. Rails has become the best framework.

[@EmanueleTozzato]

Always has been!

[@terryhenyo9216]

Laravel: Hold my beer...

[@yeco]

Laughs in Spring. But seriously though, rails is such a beauty.

[@bravenetmarketing]

(looks at my Grails app ... looks at my work's Rails app) ... yeah, no, not so much, actually.

[@TheJackTheLion]

@@bravenetmarketing 🤣😂🤣😂🤣Right...

[@bjornforsberg1]

One of the beautiful thing things about this approach is that it works REALLY well with rails engines and gem assets.. which has been a nightmare (near impossible) with Webpack 👏

[@jamescattanach1129]

Does it? I can't get importma-rails to work in a rails 7 alpha 2 engine. How did you achieve this?

[@wotok7]

@@jamescattanach1129 hmmm, just sneak peeked rails 7 alpha 2 right now and it works

[@jamescattanach1129]

@@wotok7 not in rails engines it doesn't

[@aftakitani]

This is awesome! Cant wait to put my hands on it and do an rm -rf node_modules

[@misbehavens]

Very cool. Webpack has been a pain in my side. Looking forward to moving to something simpler, especially in regards to Rails engines/gems providing their own javascript.

[@anthonypetruzzi158]

i might not do rails anymore day to day, but i still always love watching DHH videos and him demonstrating the new hottest that will be shipped. it reminds me of the first video he ever did when he was introducing rails way back in 2004 or something. Keep up with the videos DHH... only thing I can recommend for them, is you need more "whoops" in them 🤣

[@koenhandekyn]

Very nice , but as heroku is still pending HTTP2 support - this seems key in the decision to make it a default?

[@baseddepartment1306]

Exiting news... I'm really looking forward to Rails 7

[@een_schildpad]

Exciting stuff, thanks for the alpha preview!! Seems like some really awesome possibilities here; I'm starting to catch the vision 🚀 I'm still trying to wrap my head around using CDNs for dependencies, it feels a little uncomfortable at the moment but it might just be because I haven't thought that way before. It's certainly given me something to think about! Also, I'm definitely going to steal that bash alias of "r" for the "bin/rails" command that it looks like you have 🔥

[@asadali8446]

I also feel same......being in Europe most projects are very strict about using external service providers (including CDNs). I am also confused what are the options if someone is bound to provide a self compiled/hosted js libraries.

[@_unknown_guy]

@@asadali8446 guess we stick to webpack in that case.

[@JarmamStuff]

I've only just started working in Rails 7 with Hotwire a few weeks back, but I must say that this Rails version + the amazing speed of Ruby 3 for esp tests - it has done wonders for the joy of developing. I did Vue on Rails for years, and it is perfectly functional, but this just feels so much smoother. Config Hell is barely a thing. Im delighted for what Webpack was able to do for so long, but I would be lying if I said I'd miss it in the light of importmaps

[@Mixesha001]

Sold on leaving Webpack which was just a nightmare in certain cases. Not sold about the CDN for the librairies.

[@KonstantinSkobeltsyn]

Great stuff. Great thinking! Working with Rails since 2012, thank you very much for your work!

[@pyetrobr]

I luv Rails, The best framework, just missing, automatic server restart.

[@nitrosnowbs]

Awesome! Great to see that there is now an easy way to use vueJS with rails! Hype!!

[@sukotu23]

How does this change adding Vue to Rails? Are there any examples of Rails 7 with Vue?

[@christianmartinez2179]

"Modern JavaScript in rails..." You had my curiosity "...without webpack" but now, now you have my attention

[@abidiqbal6122]

You are a true gem David!!! Keep up the good work 👏

[@repoles]

Amazing! Simplicity is everything! 👏

[@TheJackTheLion]

I love that you see hundreds of devs using crazy IDE's or VSCode, etc all crazy looking and flashy. And then you see DHH just using TextMate 😂 This says volumes about his view on simplicity.

[@alhafoudh]

But what about TypeScript? Our rails stack has all JS done via TypeScript.

[@Spharian]

Neat! What about working on the app with no internet connection (or issues)? CDN will make it impossible, no?

[@martijnlafeber1008]

Put them in vendor I suppose.

[@desireco]

Always wonderful Dev experience with Rails

[@dra11y]

This is so awesome! Can the ESM/importmap gems be backported to work with Rails 6 as well?

[@pcorral]

This is great. Looking forward to start to use Rails 7 without webpack.

[@IgorKasyanchuk]

Please make more videos like this. They are very informative and could help the community. Show more videos how you developing new things, best practices, refactoring.

[@arpysemlac]

Do you ever unit test the javascript code? If yes could you provide an example how you do it with this approach?

[@kickedoutonthestreets]

With CDNs, how do we customize how much lib we want to include? For example what if I only want to import just Bootstrap's dropdown from Bootstrap's CDN.

[@kohlerm113]

Some CDNs (skypack does) allow you to specify an internal path of a file to load within the package. That being said, I would expect that it might be necessary to load more than one file in one request, which isn't supported in skypack

[@terryhenyo9216]

It's nice that Rails is catching up to Laravel already. Laravel is like Rails' once nerdy younger sister who grew up to be a beauty queen.

[@Pau1danelli]

It’s still PHP though, which means that beauty queen sister is actually a really high maintenance diva.

[@jaynews9495]

i'd like my gravestone to read: "goodbye world. sad"

[@pioztube]

Amazing, good job David!

[@AndrewOgryzek]

Very nice video! Great explanations, and I love the overall style of it. I'm curious as to why you've mentioned that you might have difficulty using JSX, when you could just source Babel, and let it know to transpile whatever you wanted it to.

[@kwhandy]

that fighting image is really interesting for me. you guys fight apple but even use apple products to make this intros. I am cracked😂

[@donGiulio]

thanks for this video, It's been released and I'm trying it now. a question is this just for js or does it affects also css?

[@dmitriyobidin6049]

The only thing i don't get: how hotwire will work with vue? Or we should only use one of them?

[@MrKeliv]

How to add TailwindCSS in rails 7 ? I still cannot find any tutorial how to add it

[@airtonbrunobr]

I knowing that not going use the Webpack, I already stay happy 😁. Simply amazing. I really liked a lot. Bye Webpack!

[@phanhaiquang]

If we change a js lib version, and few other libs depend on previous version, then we might need to manage these stuff manually ?

[@jaynews9495]

+ 1

[@henrymendez6799]

Thanks! I see that you solve things that are a bit complicated when it comes to javascript and that's very good.

[@embuscadafe2804]

Tão incrível que quase chorei!

[@Lucas-bh3et]

pprt

[@rainerborene]

This is amazing! I'm looking forward to see Basecamp and HEY running on this new architecture. One question though.. Sprockets still takes care of minification?

[@lubomirherko7331]

I'd guess that CDN will serve already minified dependencies, if needed.

[@tomasvalent3876]

@@lubomirherko7331 I wonder if sprockets would be preferred to write custom css (I'm guessing yes, it works well) Then the question would be what if you need to change sass variables (e.g. Bootstrap button colors) Then you cannot load css from CDN but from your sprockets (which is absolutely fine)

[@phanhaiquang]

What if we wrapped html body with a turbo and consider html/css content as a special model? Then, do we have a “hot reload” feature? It means that what we change on server html/css code will be push to local and re-render ???

[@BrettCoffin]

Typescript ?

[@JustBCWi]

CDNs? What if we are 100% on premise?

[@davidheinemeierhansson9989]

Download the files from the CDNs, place them in vendor/assets/javascripts/, pin that.

[@JustBCWi]

@@davidheinemeierhansson9989 You, sir, are awesome. Thank you for the answer, and all the passion funneled into Ruby & Rails. :)

[@pabloalejandrotapia8813]

Great video, but the example doesn't work. Trix can't show the image in the show action, it only show the image in the edit action...

[@muratustuntas6809]

Finally. bye bye webpack, welcome importmap. I am so glad...

[@foobar1269]

Wow love this video. Thanks for the information

[@chrisr236]

I didn't know browsers were ready for this

[@jeremyward9363]

Soooooo now we are removing webpacker? Just as I recommended moving from the asset pipeline bc rails 6 moved from the asset pipeline to webpacker. :sigh:

[@tomasvalent3876]

New hairstyle & new Rails style :) I like it. Just one question. What will you recommend for CSS (custom & lib css)? Sprockets?

[@CharlesDv]

Dear Webpack: "get the f**k outta you here!".

[@TheGrandWhiteFox]

Can't wait to try it!

[@user-od9du2wx7r]

Nice to see modern approach! But is that true that development is possible only online because of CDNs usage? Or I missed something?

[@dghimsami9068]

you can always download dependencies with "--download " option for example: ./bin/importmap pin react --download packages are downloaded to "vendor/javascript"

[@okoni.alesre]

Goodbye Webpack!!!🔥🔥🔥🔥👍

[@jaojao6955]

legendary

[@et_matrix]

I dunno I am not new to Rails but i can't able to use Vue in my Rails 7 project.

[@yesyesyay8452]

Leaving my job to pursue Master of Rails Development :)

[@AbhimanyuAryan]

Lol

[@lulakales]

Does it save js libraries locally? Sometimes there are corporate rules, that everything must be served locally and I would consider it to be painful to save it all manually. I may be in the opposition, but I actually like to work with node modules, I find it much easier to install and use packages. The only problem with webpack might be its configuration and time consuming bundling process for development. Speaking of this, I recently started to use Vite Ruby and I consider it superb. If I understand it correctly, it uses modules as in the video for development, but bundles the code for production and is easy to configure and so all the unpleasant things gone away with it. I actually don't even use Sprockets for styles or images and am using all assets under /assets dir with Vite.

[@kosnk]

Didn't know about Vite Ruby, thanks for sharing!

[@blargh123123123]

Is it safe to assume we'd still need webpack to use something like React that presumably still needs to be transpiled?

[@blargh123123123]

Got to the end of the video and apparently it does work, just without JSX.

[@Frexuz]

@@blargh123123123 not really, you have to re-write all components to use React.createElement..

[@lordsharshabeel]

No more bundling, except of course that random third party CDN you're relying on to perform your bundling. Meanwhile, you have no insight or control over your production app's dependency graph that would otherwise be generated from an npm lockfile. Why not just throw out your Gemfile while you're at it?

[@RaFiStudiozOfficial]

Love the React Ideas

[@ppavelcars]

This is great news! Thanks!

[@martijnlafeber1008]

This is the way.

[@StruC]

Using CDNs for JS libraries exclusively sounds like a GDPR and security nightmare waiting to happen.

[@NotVersace]

How so? These assets were already rendered to FE so nothing is accessible that shouldn't be and we can just host libraries on our own CDNs so we control the domains.

[@SebastienSaunier]

I think you still can vendor the JS dependencies if you don’t want to rely on an third-party CDN.

[@KasperGrubbe]

You can just vendor them and self-host.

[@bjornforsberg1]

You certainly can :) The stimulus-rails gem repo is a good example of how that is done.

[@phanhaiquang]

I think we could add a signature or checksum hash to make browser realizes the unofficial JS lib. Just the same way if we import a JS purely into a html.

[@sunsampicesg]

awsome cool feature, How to fit PWA application for rails application? Mobile android app TWA rails application how this technology are fit Rails application

[@vinogradova82]

This is really cool! Love Rails ;)

[@haroldpepete]

you don't have to use npm or any javascript package manager, that part like me a lot, and app are ready to go easily

[@jajejijoju7874]

Downloading the latest random JS library from a CDNs sounds like a huge security nightmare waiting to happen

[@kohlerm113]

You can pin versions. You just have to make sure to use a known good version

[@kannans6026]

This is so awesome... Great news..

[@torvic99]

YAY!!!

[@americosavinon]

This is great stuff David

[@collimarco]

Great, I really hate the messy Javascript ecosystem and Webpack in particular... It goes against the principles of Rails. If other communities jump from the bridge, we don't have to follow them.

[@al-mokhtar_]

but why not ruby 3 ?

[@gradientO]

Knew about this earlier via yo newsletter lol

[@davosonic60]

Hahahaha, loved the David vs Goliath picture

[@xiaohuizhang7004]

Finally, goodbye Webpack 👏👏👏

[@foxtail3296]

OMG. Amazing !!!

[@mad_now]

that david and goliath picture :)

[@nickm4064]

Can we pretty please fast-forward to Rails 9 so all that hotwire/stimulus/reflex gunk gets spit out too.

[@estuardohernandez4230]

Pretty good video.

[@ahmad_hamza]

This is very neat!

[@syritsyn]

HOLY SMOKES CANT BELIEVE MY EYES

[@wbjxfkwsklejfde34d]

🥳

[@TheaWorld]

CDN for libraries .... hmmm...

[@vicpra]

Just need run the app without install the packages after pull.

[@faizan2006]

This is Awesome..

[@udonwadon]

This is such a positive experience from the webpacker hell this whole fucking frontend industry is going towards. I'm so tired of having to COMPILE/TRANSPILE JS!

[@whyimustusemyrealname3801]

what a tasty omakase thanks dhh

[@l0rdxar]

it is a great video :)

[@dlvl86]

Awesome

[@desireco]

ERB color scheme is jarring

[@foobar1269]

Yesss ES6 finally Microsoft

[@remove_top]

wow

[@1jcc]

I'm not certain that this is the correct approach. Javascript and its ecosystem are becoming more dominant in development. Much more so than Ruby/Rails. So is the right strategy to try to avoid it as much as possible? I think the correct approach is to do the opposite. Rails needs to integrate Node and Webpack even more so that Rails won't become obsolete. Make React the default when scaffolding for example.

[@kohlerm113]

Webpack shows it's age and there are much faster alternatives (such as esbuild) which skipped some old features. I think using Urls and map them to simple imports is the way to go. Just check golangs approach for modules. That being said I still think a dependency description is needed (similar to go.mod)

[@lordsharshabeel]

Rails has always carried the bias of having no respect for Javascript, or anything that might sully its perfectly crafted Ruby castle.

[@Lucas-bh3et]

Typescript ?