6/18/2023 0 Comments Elixir phoenix components![]() ![]() I think there’s no need to call you stupid. I also want to thank not only for the many valuable insights during development but also for his inestimable help with the main parser.Ĭall me stupid but can someone explain the value in having such an abstraction in practice? I’d like to thank and the Phoenix Core Team for buying the idea of reusable components and bringing the necessary basic concepts to the core API. Bear in mind that the LiveView Component API has not reached a stable version yet and it’s currently under development, so although we try to keep track of the latest changes as much as possible, there might be temporary incompatibilities between Surface and Phoenix LiveView until a final version is released. There’s still a lot of work to do and I hope some of you out there might be willing to help me in this journey. Installation instructions and other useful information can be found at /msaraiva/surface.Īnd finally, a VS Code extension that adds support for syntax highlighting is also available at Integration with editor/tools for warnings, syntax highlighting, jump-to-definition, auto-completion and moreĪ work-in-progress live demo with more details is available at.Compile-time checking of components and their properties.Contexts - allows parent components to share data with its children without passing them as properties.An HTML-centric templating language with built-in directives ( :for, :if, …) and syntactic sugar for attributes (inspired by Vue.js).Declarative properties - explicitly declare the inputs (properties) of each component (like React).Components as modules - they can be stateless, stateful, data-only or compile-time.Now let’s look at each of these elements in deeper detail.Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative way to express and use components in Phoenix. HTML Formatter – which performs the format (mix format) for HEEx code even if it’s included inside of the sigil ~H.Declarative assigns/slots – which let us define information about attributes and slots which are included inside of the components.We will go deeper into each of these features, but you can already see a trend, right? We are moving more and more to LiveView in the same way we are removing the need to manage things like HTML, JavaScript, and CSS.įirst, let’s look more at LiveView specifically, for release 0.18, Chris McCord announced these improvements: This lets us generate the code for the authentication code but using LiveView instead of the normal controllers, views, and templates. Authentication generation code using LiveView.These features offer us a new and better way to write components. In addition to answering our prayers concerning JavaScript and HTML, this new version also helps manage CSS. This gives us the ability to define paths using a sigil that checks compilation time compared to defined routes. In the latest release, this trend is continued with the following new features: Since Phoenix 1.5 it is a noticeable trend to move into LiveView, as we progress, LiveView can replace more and more JavaScript code, allowing the Elixir developer to get better control of the HTML generation. We will revisit that at the end of this post. Next Phoenix 1.6 introduced even more exciting features, most notably the HEEx engine, the authentication and mailer generators, better integration with LiveView, and the removal of node and webpack, which was replaced with a more simplified esbuild tool.įor many of us, each new Phoenix framework release brings back the feeling of being a kid on Christmas, we wait with eager anticipation for Chris McCord to announce the new toys we have to play with for the upcoming year, but with these new toys also comes a challenge for those who want to keep their skills and their systems up-to-date. Phoenix 1.5 included some huge changes including the addition of LiveView to the framework, the creation of LiveDashboard, and the new version of PubSub (2.0.). It is a project that is growing in both features and uses cases at an incredible pace. One of the most exciting developments for Elixir is undoubtedly Phoenix. Despite now being 10 years old, there is no slowdown in the number of exciting new features, frameworks, and improvements being made to the language. ![]() As you may have seen at ElixirConf or ElixirConf EU, we are celebrating the 10th anniversary of Elixir. It is an exciting time for the Elixir community. ![]()
0 Comments
Leave a Reply. |