Imagine you want to create a button component that sets CSS classes based on the following
I’ll just write a shorter version here to save us some time. There’s an example of this feature in the “Getting Started” guide. Syntactic sugar for attributes/properties
SLEEPYTIME BOYFRIEND LAWYER CODE
We didn’t’ lose that information so we can generate the necessary code to initialize it. This is only possible because we know that is a component. I can also read it much faster, not only because there’s less noise but also because I don’t have to keep switching contexts (HTML EEx) all the time. That makes the reading experience much more pleasant. Now both definitions are declarative, clean and use the same syntax. Now let’s take a look at how HTML elements and Surface components are defined: One is declarative and clean, the other is a function call inside a weird. Let’s take a look at how HTML elements and Phoenix components are defined in EEx: Here are some, IMO, clear benefits of keeping that information: Normalized syntax for HTML elements and components When using EEx, all you end up with is a big unstructured list of lists of chunks of text, consequently, a lot of useful information that we could use in our favour to boost productivity is lost. The main issue with EEx is that it makes no distinction between plain text and HTML (or any other structured format). Each one of them tries to solve different problems. On the contrary, I don’t want any dependency between Surface’s and EEx’s syntax. I have no intention whatsoever to keep Surface similar to EEx. There is always a tradeoff.Īnd be more similar to how templates work with EEx. It’s hard to know when to stop adding abstractions on top of existing ones. Actually, by the end of the day, anything you can do with Surface can be done with EEx, just like anything you can do with React/JSX can also be done with pure Javascript. Well, it’s an abstraction on top of EEx, so it expected to work the same. The way you use those features is up to you. That guide is not meant to be a tutorial on how you should design your application, it’s just a guide with simple examples that demonstrates the main features. The Grid example was extracted from the section called “Children as data” of the “Getting started” guide mentioned above.
SLEEPYTIME BOYFRIEND LAWYER HOW TO
Of course I could, but then I’d have missed the whole point of demonstrating how to use children as data. In the Grid example it looks like you could have put the inside of a template in the render function However, I believe that either you didn’t have the opportunity to read the “Getting started” guide at or, most likely, I did a terrible job trying to explain some of the benefits there. 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.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.
0 kommentar(er)
