Kyle W.

Sytac DevJam November Frontend Meetup

Last night I visited the Sytac Dev Hub to listen to two talks by Sytac consultants. It was expected to be a small event as only 10 people had RSVP'd but only the host, the two speakers, one audience member and I showed up (probably because the world cup was on at the same time). It was a nice experience anyhow as I got to have a proper chat with everyone there.

Forms Engine Platform: homemade form automation – Carlo Comis

This talk was covering a custom form generation format/engine that Carlo had created. The forms were to be used as custom wizards which would gather data to be used in document templates, which could then be rendered as HTML or PDF documents. The document templates themselves are created with an external tool called Fonto Editor, which is embedded in the Angular application using an IFrame (because the editor is written in React).

The format that they created is XML based, as that matched the format that the Fonto Editor uses for its document structure. It had some basic requirements such as: different types of controls (with unique identifiers and expected data types), arrays of controls, groups of controls with a title, and conditions/dependencies on other controls so that fields could be shown or hidden dependent on data entered into another control. This basic schema was then used to render HTML inputs in collections from groups and conditionally on other inputs.

Once users started using this, however, many more requirements started to appear. They were asking for: default values for the inputs, boolean expressions for conditions so that multiple input values could be used to determine the display of another input, validation including cross-field validation, syncing values to and from the containing application, and error states. With these features, the logic for rendering these forms from the XML becomes very complex. You need to keep track of the state of each control, as each other control may depend on its value. This required re-thinking how the XML should be consumed to render the HTML forms.

The plan was to separate the parsing logic from the rendering logic of the form, so that all dependencies could be resolved from the start, rather than trying to find the state as it changed. The added complexity of the conditional expressions meant they couldn't rely on simple logic any more, and for this they used an external library called JSEP to parse the expressions into an AST.

Lit Html: Intro to Lit, how to create and communicate – Richard Reveron

This talk went over the basics of using Lit to create Web Components by skipping the boilerplate and using the utility functions that the Lit framework provides. Lit only has a footprint of 5KB once it's minified and compressed, and the maintainers are currently working on reducing that size even further. Richard also outlined a number of companies that have created their own library of Web Components, like ING's 'Lion Web Components'.

Lit uses Shadow DOM to render elements, and as such, CSS is encapsulated. Lit also uses declarative HTML template literals, similar to JSX, making it easy enough to create components with HTML, CSS and JavaScript all connected to the component. Reactive properties are provided by Lit, so you can rely on the component updating when properties change.

One thing that's missing from Lit Elements/Web Components is dependency injection, a talk by Matius Fernandez Martinez covered this in a previous meetup that I attended: https://github.com/thematho/lit-elements-dependency-injection-demo.

After a short live-coding session showing the basic Lit features, the host of the evening also showed one of their projects written using Web Components (without Lit). They had created a cloud file provider using Telegram as the storage: TGCloud. While not a very useful product, it is a creative idea and coding challenge.