Phoenix 1.5.0 has been Released.

Apr 24, 2020

Phoenix 1.5.0-rc0 err, I mean 1.5.0 1.5.1 has been released!

If you missed the news that Phoenix 1.5.0 and just a day later 1.5.1 was released following what was only a handful of days after the announcement of the first release candidate had been posted, don’t worry you are not the only one 😂.

Well enough sassing the amazing developers who put in such a great effort to get 1.5.0 out. Lets talk about a few things not really mentioned about the new release.

Whats all this sass about!

Speaking of Sass (ha 🤡), the default mix phx.new mix task does away with vanilla css and introduces sass into the works. Generating a new app will introduce a new file extension and a new webpack loader to your webpack config.

# assets/css

+ app.scss
- app.css
#  assets/package.json

+  "sass-loader": "^8.0.2",            
+   "node-sass": "^4.13.1",
# assets/webpack.config.js

+{
+  test: /\.[s]?css$/,
+  use: [
+    MiniCssExtractPlugin.loader,
+    'css-loader',
+    'sass-loader',
+  ],
+}
-{
-  test: /\.css$/,
-  use: [MiniCssExtractPlugin.loader, 'css-loader']
-}

While this news does not mean much to you if you are not generating a new project using mix, I thought it worth mentioning because it went I think almost completely unmentioned as a part of the changes introduced to 1.5.0 🤷‍♂️

More Webpack changes

A few other minor things have changed about the webpack config. Mainly the addition to how the devtools and sourceMap are configured.

// assets/webpack.config.js

const devMode = options.mode !== 'production';

return {
  minimizer: [
        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
        new OptimizeCSSAssetsPlugin({})
      ]
  },
    devtool: devMode ? 'source-map' : undefined,
}

Live View News

The other as often talked about change to the default front end is the introduction of nprogress for use with live view. Again not something you would really care about or even see unless generating a new project and are using the new –live option along with generating a new app, but something worth mentioning as it looks to be a good companion to working with live view.

In the generated example when using the –live option nprogress looks to tie into the phx:page-loading-start” and phx:page-loading-stop” events like so.

// Show progress bar on live navigation and form submits
window.addEventListener("phx:page-loading-start", info => NProgress.start())
window.addEventListener("phx:page-loading-stop", info => NProgress.done())

Will be nice to see if its any better than the default spinner I think was being used with LiveView before.

There look too be a few other subtleties to the way an app is generated given you provide the –live option such as how the layouts in the web folder are generated.

# lib/my_app_web/templates/layout
app.html.eex
+live.html.leex
+ root.html.leex

The default app.html.eex is still there but stripped down to just one main element.
The live.html.leex gets loaded via the macro found in lib/my_app_web.ex
found in one of the two new functions defined there for use with live view.

def live_view do
  quote do
    use Phoenix.LiveView,
      layout: {MyAppWeb.LayoutView, "live.html"}

    unquote(view_helpers())
  end
end

def live_component do
  quote do
    use Phoenix.LiveComponent

    unquote(view_helpers())
  end
end

It’s markdown is also fairly minimal as to match the app.html.eex file only replacing the flash lookup. I suspect this is the primary rationale for splitting up the layouts as the app uses one way to look up the conn’s flash and the live view layout uses the other.

And the root.html.leex looks to be where the majority of the markdown has been moved to from out of the app.html.eex file.

It gets loaded via the router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
+   plug :fetch_live_flash
+   plug :put_root_layout, {MyAppWeb.LayoutView, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers
  end

You will also notice the new fetch_live_flash plug defined. It does not look as if its a replacement for the normal fetch_flash plug seeing that you will still generate the fetch_flash plug when not using the –live option. So my assumption is you will likely still need them both.

Migration time

Before you go running to upgrade I’d recommend a quick look over the migration docs as there are a few other changes that you will need to address. https://gist.github.com/chrismccord/e53e79ef8b34adf5d8122a47db44d22f

Notably the new <%= @inner_content %> replaces the older <%= render(@view_module, @view_template, assigns) %> and the depreciation of the Phoenix.ConnTest macro in favor of an import.

While this post was mostly aimed at showing you things that I don’t think got any attention in this new release its worth mentioning there are is so much more important additions I didn’t even cover such as the much improved new Phoenix PubSub 2.0 and the new LiveDashboard.

You can read about all the new changes and also watch Chris Mccord make a twitter clone in 15mins using the new live view hottness here https://www.phoenixframework.org/blog/build-a-real-time-twitter-clone-in-15-minutes-with-live-view-and-phoenix-1-5