sprockets VS Turbolinks

Have you noticed that we used JSX syntax? It is not what the browser understands by default. In Rails, the Sprockets gem is responsible for translating from the languages that developers like to write to the languages that the browser can run. However, it doesn't compile JSX by default. You can learn from the Sprockets fascinating readme on how to befriend it with new file types, but for JSX it is already done by the creator of the jass-react-jsx gem. Therefore, there is no reason to write the code again that is already written and working. It uses Babel, a JavaScript library that converts one JavaScript to another. It requires Node.js to run. I can't imagine a case where you have a Rails app installed but Node.js isn't, but the fact that I can't imagine it doesn't mean that it's impossible. So lets add babel to our app: Console

Sprockets actually does define those tasks: https://github.com/rails/sprockets/blob/main/lib/rake/sprocketstask.rb

What an exciting couple of months it has been for the Rails community! Rails 7 was released in December of 2021 and this month we are welcoming Propshaft. David Heinemeier Hansson (DHH), the creator of Rails, released a post on Feb. 11 introducing the community to the new and improved asset pipeline for Rails. While Propshaft likely won't be the default until at least Rails 8, it promises a simpler solution to asset management over its predecessor, Sprockets. Sprockets, the current default asset pipeline library, has grown increasingly heavy over the years as it has attempted to shoulder all things related to bundling, minifying, transpiling, and compressing. Enabled by the new era of tech that makes Rails 7 possible, Propshaft is touted as being "absolutely tiny" in comparison and aims to provide the following: a configurable load path for your assets, digest stamping for long-expiry cache and better performance, a development server that removes the need to pre-compile assets, and basic compilers instead of full transpilers. Sprockets will require relatively long-term support and will remain the default for now but fret not! You can create a Rails 7+ app using Propshaft, or upgrade an existing app and start using it now.

after being in beta for 3 years, Sprockets 4 was released, with support for ES6 and source maps in the asset pipeline (2019), to serve people still hesitant with webpack,

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