FHIR and Polymer web components deep dive.

So its the 2nd week of our Google Summer of Code journey. And I have been learning about polymer and thinking about how should I approach the project.

Exploring Polymer

Polymer seems fun to work with. Just like any other JavaScript framwork that we are used to we have components based architecture. Like Angular, React or Vue. But whats really cool about web components is that they can be used with any framework. Like if I have made components with Polymer. I could import them into my react app or an Angular application. That’s cool right. There are other options to create web components of course, Like Angular Elements. But for this project we will be sticking with Polymer.js Polymer has a pretty similar structure to Angular components. So I kinda feel right at home.

import { LitElement, html, property, customElement } from 'lit-element';

export class SimpleGreeting extends LitElement {
  @property() name = 'World';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
<simple-greeting name="Everyone"></simple-greeting>
  • All we have to do is just import LitElement.
  • add the custom element decorator to our class which extends from LitElement.
  • Then with the property decorator we can take input values like we do in Angular.
  • And file instead of the html template separately. We just call the render method. Similar to React. But we don’t need to JSX here. Just good old html will work. 

Refactoring for better organization

A lot of work has been done in the previous GSoC project. As this year is the extension of the same project. I think its time to refactor the structure of components so that they are better maintainable. The current state is like this:

All the components are at the same directory level. With the resource name following by the component. This might get cluttered when we add a lot of resources with multiple components. I think we can improve the structure by created a separate directory for each resource and adding the components for that in their. And if there are components that are reused in multiple resources we can add them in the data types directory. Like this:

  • Project
    • DataTypes
      • code
    • Patient
      • active
      • human-name
    • Invoice
      • status

I will discuss with the mentors and see what they think about this.

Refining Proposal

I am also working on creating new wireframes for the components that I will be building. The proposal can be improved. I really need to add some more wireframes. I will be starting with the invoice resource added in the FHIR v4.0. I included this in the project proposal. I will be creating more wireframes similar to this one in the coming days.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.