Previously Hot Reloading for React was done with a technique called Hot Module Replacement, for technical reasons that approach is no longer used and instead React provides an API for "Fast Refresh." Fast Refresh is what we'll be using. The term 'Hot Reloading' used in this post is used in the general sense to refer to changing the content on the page but without a full page reload (the definition of Hot Reloading that I'm using here isn't 100% agreed upon, but it seems to be the predominant usage of the term). Since we're dealing with Hot Reloading for a React app, some react terminology is in order.
#LIVERELOAD PHOENIX API UPDATE#
Hot Reloading is when parts of the page update without a full page reload which creates a significant time-savings when building complex web applications. It is time intensive to redo those steps each time you want to make a change. For example, imagine that you're implementing an undo/redo stack you want to change some wording or styling on an element, but that element only shows up after you have already created some data and then hit undo a couple times. When developing a highly interactive web application, one of the frictions encountered is that it becomes time consuming to reproduce the state that is needed to test a particular feature after a full page reload. Apps created via mix phx.new have Phoenix LiveReload configured by default.īut, there is a downside to those full page reloads. When any of the files in those locations change (or a new file is added) Phoenix LiveReload initiates a full page reload. You can configure Phoenix LiveReload to watch a set of file patterns. Phoenix supports live reload out of the box via Phoenix LiveReload. This eliminates the need for the developer to alt-tab over to the browser and manually hit Cmd+r. Live Reloading is when the browser automatically does a full page reload after a change is made. The two general approaches to shortening the refresh feedback cycle are: live reloading and hot reloading. Live Reloading, Hot Reloading and Phoenix
#LIVERELOAD PHOENIX API HOW TO#
This post is about the ways Hot Reloading helped our team shorten this cycle, and how to apply it on your React apps that are built with Webpack and are using Phoenix as the backend. That "refresh" step can take a lot of engineering time and effort for a complex web application due to the length of the feedback cycle.
That work includes common cycles in frontend development: edit, save, refresh.
And while I focus primarily on the backend of our application, I also touch the frontend and work with our frontend developers.
0 kommentar(er)
