Turbolinks VS Webpacker

You can find out more about Turbolinks on the GitHub repository (https://github.com/turbolinks/turbolinks). The repo is now archived, because it’s was integrated in a framework called Turbo, but the functionality is the same.

I know it’s been replaced by Turbo but you can copy Turbolink’s progress bar: https://github.com/turbolinks/turbolinks/blob/master/src/progress_bar.ts. It uses an animation that “trickles” based on response time.

// app/javascript/src/helpers/price.js // Turbolinks are enabled by default in Rails, // we need to process our script on every page load // https://github.com/turbolinks/turbolinks#full-list-of-events document.addEventListener("turbolinks:ready", () => { // Get language from html tag const lang = document.documentElement.lang; // Find all span tags with data-localize="price" const pricesOnPage = document.querySelectorAll("[data-localize=\"price\"]"); if (pricesOnPage.length > 0) { // Iterate all price span tags [...pricesOnPage].forEach(priceOnPage => { // Modify text in span tag according to current language priceOnPage.textContent = priceOnPage.textContent.toLocaleString( lang, { style: "currency", currency: "USD" } ); }) } });

Because it feels fast, it actually is not. It is using Turbolinks. https://github.com/turbolinks/turbolinks And Laravel Wrapper for Turbolinks: https://github.com/frenzyapp/turbolinks

https://github.com/turbolinks/turbolinks

It provides a smooth UX by fetching next page's HTML in background, then replace the DOM by compareing the diff in HTML. So you won't see a blank page while navigating between pages.

If you have used Turbolinks in the past, you will feel right at home with Turbo Drive. At its core, some JS code intercepts JavaScript events on your application, loads HTML asynchronously, and replaces parts of your HTML markup.

When the Turbolinks technology first came out in Rails 4, some people did not understand what it was really about. I happened to get it right away only because I personally implemented my own version of Turbo Drive for one of my client projects before Turbolinks was released (around 2012), so I really appreciated Turbolinks when it was released. With the latest updates in Rails 7, the Turbolinks technology has been renamed to Turbo Drive (now part of Hotwire) since it not only accelerates hyperlinks anymore, but also form submissions too.

Turbolinks, a great tool to make navigating your web application faster, is no longer under active development. It has been superseded by a new framework called Turbo, which is part of the Hotwire umbrella.

source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.7.3' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 6.0.3', '>= 6.0.3.7' gem 'mongoid', git: 'https://github.com/mongodb/mongoid.git' # Use Puma as the app server gem 'puma', '~> 4.1' # Use SCSS for stylesheets gem 'sass-rails', '>= 6' # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker gem 'webpacker', '~> 4.0' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.7' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 4.0' # Use Active Model has_secure_password # Use Active Storage variant # gem 'image_processing', '~> 1.2' gem 'axlsx' gem 'caxlsx_rails' #Bootstrap for UI gem 'bootstrap', '~> 5.1.0' gem 'bootstrap-timepicker-rails', '~> 0.1.3' gem 'bootstrap-select-rails', '~> 1.6', '>= 1.6.3' #JQuery Rails gem 'jquery-rails' gem 'rails_12factor', group: :production # Reduces boot times through caching; required in config/boot.rb gem 'bootsnap', '>= 1.4.2', require: false group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] end group :development do # Access an interactive console on exception pages or by calling 'console' anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '~> 3.2' gem 'pry' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' end group :test do # Adds support for Capybara system testing and selenium driver gem 'capybara', '>= 2.15' gem 'selenium-webdriver' # Easy installation and use of web drivers to run system tests with browsers gem 'webdrivers' gem 'cucumber-rails', require: false gem 'database_cleaner' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] #HTTParty for RESTful API calls gem 'httparty' #Paperclip for storing files gem 'paperclip' gem "mongoid-paperclip", :require => "mongoid_paperclip" gem "letter_opener", :group => :development r

Using Webpacker in Rails provides several advantages over the traditional asset pipeline. First, Webpacker uses JavaScript modules, which allows for better code organization and improved code reusability. Second, it offers modern frontend build tools, such as Babel and PostCSS, for transforming and compiling assets. Third, it provides faster build times and faster runtime performance through code splitting and lazy loading. Fourth, it offers better integration with JavaScript frameworks such as React, Vue, and Angular. Overall, Webpacker offers a more flexible and modern asset management solution for Rails applications. And while Webpacker is being retired, this initiative is to consolidate our code accordingly before moving our bundler to another solution.

This article is replace Webpacker with Simpacker and webpack.

in ruby ​​on rails 7 what is the best way to properly install Angular because I can't find any documentation about it. The only tutorial that exists uses webpacker (https://github.com/rails/webpacker) but unfortunately it is no longer supported and no longer up to date in terms of security.

From the webpacker gem:

Check this: https://github.com/rails/webpacker/issues/2825

instead of using webpacker you should move to esbuild or importmap. Webpacker has been retired a few months ago (cf https://github.com/rails/webpacker) There are videos explained how to set this up (e.g. for importmap https://learnetto.com/tutorials/how-to-use-react-with-rails-7

Took me 2 days to find this bug report: https://github.com/rails/webpacker/issues/3188 (thanks again tagliala)

But it's there in the webpacker README now, if anyone hasn't seen it. https://github.com/rails/webpacker