![]() 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. The very website you’re working on now is built in LiveView, with only four tiny custom JavaScript functions for analytics and payment processing.LiveView empowers developers to build interactive, single-page web apps with ease by providing a framework that eliminates the need for guesswork. It has been an opensource project from the very beginning, and is rapidly gaining notariety in many programming communities. The project was unveiled at ElixirConf in 2019, and released in 2020 as a part of Phoenix 1.5. After years of building effective infrastructure with startling scalability and reliability, he was finally ready to attack LiveView. ![]() He wrote a book called Metaprogramming Elixir, and then shifted his attention to the Phoenix framework. When Chris McCord - creator of Phoenix - moved from a Ruby consultancy to the Elixir community, he was looking for the kind of infrastructure that would let something like LiveView flourish. The end result is that the developer’s focus shifts from things that are difficult, like managing concurrency or IO, to something that programmers are good at, writing small functions to change state. Then, the user renders the data as a string, and any changes to the data structure automatically trigger a render. Instead, LiveView lets a programmer build a data structure in memory. It takes traditional web development, which focuses on individual tasks that render HTML, and flips the model on its head. The LiveView project has swept through the Elixir community like wildfire. Phoenix is the web development framework for Elixir, and LiveView is a Phoenix service that allows interactive page flows without JavaScript. The updates will tentatively be compldted by Feb 1, 2021. Then, we’ll update the written content and links. We’re starting by updating all of the videos. NOTE! This version of the LiveView content is under development.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |