Really simple two page tutorial on adding Turbolinks magic to your traditional webapp in order to achieve a SPA (singe page application) feel without having to learn a complicated framework like React, Angular or Vue. Simply import Turbolinks, then call Turbolinks.visit() to load your pages in the background with Turbolinks & AJAX =>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js"></script> | |
| <style> | |
| body { | |
| background-color: blue; | |
| } | |
| a { | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button onclick="Turbolinks.visit('mylink.html');">click me</button> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| background-color: blue; | |
| } | |
| p { | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>loaded with turbolinks, sweet huh? no white flash between page loads!</p> | |
| </body> | |
| </html> |