Alpha preview: Modern JavaScript in Rails 7 without Webpack

  Рет қаралды 60,401

David Heinemeier Hansson

David Heinemeier Hansson

2 жыл бұрын

Modern web apps without JavaScript bundling or transpiling: world.hey.com/dhh/modern-web-...
Rails 7 minus Webpack plus importmap PR: github.com/rails/rails/pull/4...

Пікірлер: 132
@portlime
@portlime 2 жыл бұрын
The time of endlessly waiting for webpack re-compiling is over. This is great.
@adriantomole1019
@adriantomole1019 2 жыл бұрын
I only used that feature only when I continued the work of other ppl. Glad I can get rid of it.
@lulakales
@lulakales 2 жыл бұрын
Try vite ruby, you don't need to wait!
@anthonypetruzzi158
@anthonypetruzzi158 2 жыл бұрын
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 🤣
@aftakitani
@aftakitani 2 жыл бұрын
This is awesome! Cant wait to put my hands on it and do an rm -rf node_modules
@bjornforsberg1
@bjornforsberg1 2 жыл бұрын
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
@jamescattanach1129 2 жыл бұрын
Does it? I can't get importma-rails to work in a rails 7 alpha 2 engine. How did you achieve this?
@wotok7
@wotok7 2 жыл бұрын
@@jamescattanach1129 hmmm, just sneak peeked rails 7 alpha 2 right now and it works
@jamescattanach1129
@jamescattanach1129 2 жыл бұрын
@@wotok7 not in rails engines it doesn't
@abidiqbal6122
@abidiqbal6122 2 жыл бұрын
You are a true gem David!!! Keep up the good work 👏
@KonstantinSkobeltsyn
@KonstantinSkobeltsyn 2 жыл бұрын
Great stuff. Great thinking! Working with Rails since 2012, thank you very much for your work!
@sadiqmmm
@sadiqmmm 2 жыл бұрын
Unbelievable. Rails has become the best framework.
@EmanueleTozzato
@EmanueleTozzato 2 жыл бұрын
Always has been!
@terryhenyo9216
@terryhenyo9216 2 жыл бұрын
Laravel: Hold my beer...
@yeco
@yeco 2 жыл бұрын
Laughs in Spring. But seriously though, rails is such a beauty.
@bravenetmarketing
@bravenetmarketing 2 жыл бұрын
(looks at my Grails app ... looks at my work's Rails app) ... yeah, no, not so much, actually.
@TheJackTheLion
@TheJackTheLion 2 жыл бұрын
@@bravenetmarketing 🤣😂🤣😂🤣Right...
@henrymendez6799
@henrymendez6799 2 жыл бұрын
Thanks! I see that you solve things that are a bit complicated when it comes to javascript and that's very good.
@baseddepartment1306
@baseddepartment1306 2 жыл бұрын
Exiting news... I'm really looking forward to Rails 7
@pioztube
@pioztube 2 жыл бұрын
Amazing, good job David!
@misbehavens
@misbehavens 2 жыл бұрын
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.
@een_schildpad
@een_schildpad 2 жыл бұрын
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
@asadali8446 2 жыл бұрын
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
@_unknown_guy 2 жыл бұрын
@@asadali8446 guess we stick to webpack in that case.
@pcorral
@pcorral 2 жыл бұрын
This is great. Looking forward to start to use Rails 7 without webpack.
@nitrosnowbs
@nitrosnowbs 2 жыл бұрын
Awesome! Great to see that there is now an easy way to use vueJS with rails! Hype!!
@sukotu23
@sukotu23 2 жыл бұрын
How does this change adding Vue to Rails? Are there any examples of Rails 7 with Vue?
@repoles
@repoles Жыл бұрын
Amazing! Simplicity is everything! 👏
@desireco
@desireco 2 жыл бұрын
Always wonderful Dev experience with Rails
@TheGrandWhiteFox
@TheGrandWhiteFox 2 жыл бұрын
Can't wait to try it!
@americosavinon
@americosavinon 2 жыл бұрын
This is great stuff David
@ppavelcars
@ppavelcars 2 жыл бұрын
This is great news! Thanks!
@foobar1269
@foobar1269 2 жыл бұрын
Wow love this video. Thanks for the information
@kwhandy
@kwhandy 2 жыл бұрын
that fighting image is really interesting for me. you guys fight apple but even use apple products to make this intros. I am cracked😂
@vinogradova82
@vinogradova82 2 жыл бұрын
This is really cool! Love Rails ;)
@JarmamStuff
@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
@AndrewOgryzek
@AndrewOgryzek 2 жыл бұрын
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.
@christianmartinez2179
@christianmartinez2179 2 жыл бұрын
"Modern JavaScript in rails..." You had my curiosity "...without webpack" but now, now you have my attention
@ahmad_hamza
@ahmad_hamza 2 жыл бұрын
This is very neat!
@kannans6026
@kannans6026 2 жыл бұрын
This is so awesome... Great news..
@RaFiStudiozOfficial
@RaFiStudiozOfficial 2 жыл бұрын
Love the React Ideas
@embuscadafe2804
@embuscadafe2804 2 жыл бұрын
Tão incrível que quase chorei!
@Lucas-bh3et
@Lucas-bh3et 2 жыл бұрын
pprt
@tomasvalent3876
@tomasvalent3876 2 жыл бұрын
New hairstyle & new Rails style :) I like it. Just one question. What will you recommend for CSS (custom & lib css)? Sprockets?
@dra11y
@dra11y 2 жыл бұрын
This is so awesome! Can the ESM/importmap gems be backported to work with Rails 6 as well?
@pyetrobr
@pyetrobr 2 жыл бұрын
I luv Rails, The best framework, just missing, automatic server restart.
@rainerborene
@rainerborene 2 жыл бұрын
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
@lubomirherko7331 2 жыл бұрын
I'd guess that CDN will serve already minified dependencies, if needed.
@tomasvalent3876
@tomasvalent3876 2 жыл бұрын
@@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)
@airtonbrunobr
@airtonbrunobr Жыл бұрын
I knowing that not going use the Webpack, I already stay happy 😁. Simply amazing. I really liked a lot. Bye Webpack!
@faizan2006
@faizan2006 2 жыл бұрын
This is Awesome..
@IgorKasyanchuk
@IgorKasyanchuk 2 жыл бұрын
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.
@jaynews9495
@jaynews9495 2 жыл бұрын
i'd like my gravestone to read: "goodbye world. sad"
@muratustuntas6809
@muratustuntas6809 2 жыл бұрын
Finally. bye bye webpack, welcome importmap. I am so glad...
@Mixesha001
@Mixesha001 2 жыл бұрын
Sold on leaving Webpack which was just a nightmare in certain cases. Not sold about the CDN for the librairies.
@gradientO
@gradientO 2 жыл бұрын
Knew about this earlier via yo newsletter lol
@donGiulio
@donGiulio 2 жыл бұрын
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?
@foxtail3296
@foxtail3296 2 жыл бұрын
OMG. Amazing !!!
@davosonic60
@davosonic60 2 жыл бұрын
Hahahaha, loved the David vs Goliath picture
@koenhandekyn
@koenhandekyn 2 жыл бұрын
Very nice , but as heroku is still pending HTTP2 support - this seems key in the decision to make it a default?
@martijnlafeber1008
@martijnlafeber1008 2 жыл бұрын
This is the way.
@estuardohernandez4230
@estuardohernandez4230 10 ай бұрын
Pretty good video.
@jaojao6955
@jaojao6955 2 жыл бұрын
legendary
@dlvl86
@dlvl86 2 жыл бұрын
Awesome
@l0rdxar
@l0rdxar 2 жыл бұрын
it is a great video :)
@syritsyn
@syritsyn 2 жыл бұрын
HOLY SMOKES CANT BELIEVE MY EYES
@whyimustusemyrealname3801
@whyimustusemyrealname3801 2 жыл бұрын
what a tasty omakase thanks dhh
@okoni.alesre
@okoni.alesre 2 жыл бұрын
Goodbye Webpack!!!🔥🔥🔥🔥👍
@Spharian
@Spharian 2 жыл бұрын
Neat! What about working on the app with no internet connection (or issues)? CDN will make it impossible, no?
@martijnlafeber1008
@martijnlafeber1008 2 жыл бұрын
Put them in vendor I suppose.
@torvic99
@torvic99 2 жыл бұрын
YAY!!!
@mohamadnorouzi3278
@mohamadnorouzi3278 2 жыл бұрын
that david and goliath picture :)
@yesyesyay8452
@yesyesyay8452 2 жыл бұрын
Leaving my job to pursue Master of Rails Development :)
@AbhimanyuAryan
@AbhimanyuAryan 2 жыл бұрын
Lol
@TheJackTheLion
@TheJackTheLion 2 жыл бұрын
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.
@chrisr236
@chrisr236 2 жыл бұрын
I didn't know browsers were ready for this
@user-od9du2wx7r
@user-od9du2wx7r 2 жыл бұрын
Nice to see modern approach! But is that true that development is possible only online because of CDNs usage? Or I missed something?
@dghimsami9068
@dghimsami9068 2 жыл бұрын
you can always download dependencies with "--download " option for example: ./bin/importmap pin react --download packages are downloaded to "vendor/javascript"
@xiaohuizhang7004
@xiaohuizhang7004 2 жыл бұрын
Finally, goodbye Webpack 👏👏👏
@remove_top
@remove_top 2 жыл бұрын
wow
@terryhenyo9216
@terryhenyo9216 2 жыл бұрын
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
@Pau1danelli 2 жыл бұрын
It’s still PHP though, which means that beauty queen sister is actually a really high maintenance diva.
@phanhaiquang
@phanhaiquang 2 жыл бұрын
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
@jaynews9495 2 жыл бұрын
+ 1
@wbjxfkwsklejfde34d
@wbjxfkwsklejfde34d Жыл бұрын
🥳
@CharlesDv
@CharlesDv 2 жыл бұрын
Dear Webpack: "get the f**k outta you here!".
@kickedoutonthestreets
@kickedoutonthestreets 2 жыл бұрын
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
@kohlerm113 2 жыл бұрын
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
@phanhaiquang
@phanhaiquang 2 жыл бұрын
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 ???
@haroldpepete
@haroldpepete 2 жыл бұрын
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
@MrKeliv
@MrKeliv 2 жыл бұрын
How to add TailwindCSS in rails 7 ? I still cannot find any tutorial how to add it
@alhafoudh
@alhafoudh 2 жыл бұрын
But what about TypeScript? Our rails stack has all JS done via TypeScript.
@blargh123123123
@blargh123123123 2 жыл бұрын
Is it safe to assume we'd still need webpack to use something like React that presumably still needs to be transpiled?
@blargh123123123
@blargh123123123 2 жыл бұрын
Got to the end of the video and apparently it does work, just without JSX.
@Frexuz
@Frexuz 2 жыл бұрын
@@blargh123123123 not really, you have to re-write all components to use React.createElement..
@sunsampicesg
@sunsampicesg 2 жыл бұрын
awsome cool feature, How to fit PWA application for rails application? Mobile android app TWA rails application how this technology are fit Rails application
@dmitriyobidin6049
@dmitriyobidin6049 2 жыл бұрын
The only thing i don't get: how hotwire will work with vue? Or we should only use one of them?
@arpysemlac
@arpysemlac 6 ай бұрын
Do you ever unit test the javascript code? If yes could you provide an example how you do it with this approach?
@lulakales
@lulakales 2 жыл бұрын
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
@kosnk 2 жыл бұрын
Didn't know about Vite Ruby, thanks for sharing!
@pabloalejandrotapia8813
@pabloalejandrotapia8813 2 жыл бұрын
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...
@foobar1269
@foobar1269 2 жыл бұрын
Yesss ES6 finally Microsoft
@BrettCoffin
@BrettCoffin 2 жыл бұрын
Typescript ?
@jeremyward9363
@jeremyward9363 2 жыл бұрын
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:
@et_matrix
@et_matrix Жыл бұрын
I dunno I am not new to Rails but i can't able to use Vue in my Rails 7 project.
@al-mokhtar_
@al-mokhtar_ 2 жыл бұрын
but why not ruby 3 ?
@vicpra
@vicpra 2 жыл бұрын
Just need run the app without install the packages after pull.
@udonwadon2045
@udonwadon2045 2 жыл бұрын
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!
@JustBCWi
@JustBCWi 2 жыл бұрын
CDNs? What if we are 100% on premise?
@davidheinemeierhansson9989
@davidheinemeierhansson9989 2 жыл бұрын
Download the files from the CDNs, place them in vendor/assets/javascripts/, pin that.
@JustBCWi
@JustBCWi 2 жыл бұрын
@@davidheinemeierhansson9989 You, sir, are awesome. Thank you for the answer, and all the passion funneled into Ruby & Rails. :)
@jajejijoju7874
@jajejijoju7874 2 жыл бұрын
Downloading the latest random JS library from a CDNs sounds like a huge security nightmare waiting to happen
@kohlerm113
@kohlerm113 2 жыл бұрын
You can pin versions. You just have to make sure to use a known good version
@lordsharshabeel
@lordsharshabeel 2 жыл бұрын
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?
@StruC
@StruC 2 жыл бұрын
Using CDNs for JS libraries exclusively sounds like a GDPR and security nightmare waiting to happen.
@NotVersace
@NotVersace 2 жыл бұрын
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
@SebastienSaunier 2 жыл бұрын
I think you still can vendor the JS dependencies if you don’t want to rely on an third-party CDN.
@KasperGrubbe
@KasperGrubbe 2 жыл бұрын
You can just vendor them and self-host.
@bjornforsberg1
@bjornforsberg1 2 жыл бұрын
You certainly can :) The stimulus-rails gem repo is a good example of how that is done.
@phanhaiquang
@phanhaiquang 2 жыл бұрын
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.
@TheaWorld
@TheaWorld Жыл бұрын
CDN for libraries .... hmmm...
@collimarco
@collimarco 2 жыл бұрын
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.
@nickm4064
@nickm4064 2 жыл бұрын
Can we pretty please fast-forward to Rails 9 so all that hotwire/stimulus/reflex gunk gets spit out too.
@desireco
@desireco 2 жыл бұрын
ERB color scheme is jarring
@1jcc
@1jcc 2 жыл бұрын
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
@kohlerm113 2 жыл бұрын
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
@lordsharshabeel 2 жыл бұрын
Rails has always carried the bias of having no respect for Javascript, or anything that might sully its perfectly crafted Ruby castle.
@Lucas-bh3et
@Lucas-bh3et 2 жыл бұрын
Typescript ?
Alpha preview: Rails 7 w/ esbuild + Tailwind CSS
15:26
David Heinemeier Hansson
Рет қаралды 36 М.
Rails 7: The Demo
34:15
David Heinemeier Hansson
Рет қаралды 104 М.
I Built a Shelter House For myself and Сat🐱📦🏠
00:35
TooTool
Рет қаралды 35 МЛН
The day of the sea 🌊 🤣❤️ #demariki
00:22
Demariki
Рет қаралды 47 МЛН
World’s Deadliest Obstacle Course!
28:25
MrBeast
Рет қаралды 75 МЛН
On Writing Software (well?) #1: Pilot Episode
15:59
David Heinemeier Hansson
Рет қаралды 77 М.
Frontendless Rails frontend - Vladimir Dementyev
34:35
Ruby Central
Рет қаралды 10 М.
Alpha preview: Using React with importmaps on Rails 7
13:29
David Heinemeier Hansson
Рет қаралды 15 М.
Exploring Rails 7, Hotwire and AnyCable speedy streams
38:19
Evil Martians
Рет қаралды 7 М.
Rails World 2023 Opening Keynote - David Heinemeier Hansson
1:02:20
Ruby on Rails
Рет қаралды 78 М.
Node.js is a serious thing now… (2023)
8:18
Code With Ryan
Рет қаралды 628 М.
JavaScript vs Python: What's the Difference?
11:11
ArjanCodes
Рет қаралды 29 М.
New Javascript Feature: Import Maps Explained!
14:35
Pentacode
Рет қаралды 2,4 М.
APPLE совершила РЕВОЛЮЦИЮ!
0:39
ÉЖИ АКСЁНОВ
Рет қаралды 1,6 МЛН
Apple watch hidden camera
0:34
_vector_
Рет қаралды 63 МЛН
Main filter..
0:15
CikoYt
Рет қаралды 6 МЛН
wireless switch without wires part 6
0:49
DailyTech
Рет қаралды 4,3 МЛН
TOP-18 ФИШЕК iOS 18
17:09
Wylsacom
Рет қаралды 771 М.