The HEEx templating engine is an extension of EEx. heex extension that is implicitly rendered by a live view, or any markup rendered by a live view or component that is encapsulated in the ~H''', ''' tags. Understanding HEEx TemplatesĪ HEEx template is any file ending in the. We're almost ready to define our function component. Function components are implemented in modules that use the Phoenix.Component behaviour, which also gives us a convenient syntax for rendering function components. A function component takes in an assigns argument and returns a HEEx template. List Ratings in Phoenix LiveViewīefore we build our ratings index function component, let's talk about what function components are and how they work. Now, we're ready to build our first function component. We have the basic framework for our survey UI in place. Now, let's implement a mount/3 function that adds the current user to socket assigns, like this: This way, we can make it available to the rating form component later. So we want to store that user in the live view's state. We need to use the current user to build our survey's demographic and rating portions since a demographic belongs to a user and a rating belongs to a game and a user. Let's think a bit about that initial state. The mount/3 function builds the initial state for SurveyLive. With our route established, it's time to define the SurveyLive live view. The generator also gives us a function, Accounts.get_user_by_session_token(user_token), that we will use to fetch the user for that token. This means that when a logged-in user points their browser at /survey, the SurveyLive view will mount with a session argument that contains a key of 'user_token' pointing to a token we can use to identify the current user. Just know that the survey route is a protected route that requires an authenticated user. The details of authentication aren't important for our purposes here. This code assumes you've used the Phoenix Auth generator to add authentication to your Phoenix app. # router.ex scope '/', ArcadeWeb do pipe_through live '/survey', SurveyLive, :index end If they have completed some (or all) ratings, they will see those displayed and forms to submit ratings for the games they have not yet rated. If users haven't completed a game rating, they will see a list of forms to rate each game 1-5 stars. The ratings index component will iterate over the games and show a game rating if one by the current user exists, or a form for a new rating if not. This live view will render a child functional component, 'ratings index'. We'll begin with a parent live view that lives at the /survey route, ArcadeWeb.SurveyLive. Let's lay out what we'll build in a bit more detail.

We'll focus on that second part of the survey - the game rating forms. In this post, we'll build out a 'user survey' feature that asks the user to fill out some demographic info about themselves and then provide a rating for each of several games. A user can log in, select a game to play, and even invite friends to play games with them. Imagine that you're responsible for a Phoenix web app, Arcade, that provides in-browser games to users. Let's dive in! The Feature: Compose a User Survey UI for a Phoenix LiveView Appīefore we dive into writing any actual code, let's talk about the feature we'll build. We'll also use more sophisticated live components to craft easy-to-maintain single-page flows that handle complex user interactions.Īlong the way, you'll gain a solid understanding of working with HEEx - Phoenix and LiveView's new templating engine - and you'll see some of LiveView's out-of-the-box function components in action.

In this post, we'll take a look at how you can layer simple, single-purpose functional components to wrap up shared presentation logic. LiveView empowers developers to build interactive, single-page web apps with ease by providing a framework that eliminates the need for guesswork.

Phoenix liveview mount