Components oriented approach<\/h2>\n
Following the modern front development paradigms, it is recommended to follow a components oriented approach or architecture when developing web applications for better modularity and separation of concerns. According to Dan Shapiro<\/a>, components can be seen as a small feature that makes up a piece of the user interface.<\/p>\n Components constitue the core functionality of several JavaScript frameworks like Angular and React. By using such frameworks, the developer can have a powerful set of tools at hand, however; this can create a lock-in and can lead to several issues in case breaking changes are introduced into the frameworks. Using the standard web component APIs can have its benefits in the way that the application has no dependencies and is somehow lightweight and easily adaptable to changes. In this example, we would like to develop an expense management application that allows adding, listing, and deleting expenses. As this is a demonstration, we want the application to use the browser\u2019s local storage<\/a> for storing the data. We can imagine the structure of our application as follows:<\/p>\n Accordingly, we are going to develop the above components and glue them together to make up our application.<\/p>\n In addition to the basic Scala.js setup described in the documentation<\/a>, we are going to need to configure the Scala.js linker to produce ES6 (ECMAScript2015) JavaScript, so we need to add the following to the Additionally, we need to enable Scala.js defined types (aka non native javascript types), to be exported to JavaScript by default by adding the following to the Scala build file:<\/p>\n Working with web components require some APIs that are not present by default in CustomElementsRegistry definition:<\/p>\n In this way we can register our custom elements by executing Template and Shadow Dom are integral parts of the core specifications of web components and are important tools for developing web components. We are going to create the necessary objects and methods for enabling those as they are also missing from and as the HTMLElement object misses the We have now filled the missing gaps and we can start developing our components.<\/p>\n It is more convenient to use templates and slots<\/a> instead of creating elements programatically.<\/p>\n The template<\/p>\n AppElement.scala<\/p>\n Finally, for the component to work properly, it needs to be registered:<\/p>\n Since Scala supports object oriented features like inheritence and polymorphism, our web components can use object orientation for better code usage and even more modularity. For example, the template<\/p>\n ListSectionElement.scala<\/p>\n DeleteSectionElement.scala:<\/p>\n we can notice that We have made We have seen how object orientation helped us effectively design and implement all Components can communicate into different ways like custom events and by invoking each others methods. For example, when adding a new expense we need to tell the At the level of the Another way of communication between components is by invoking each others methods. For example, the Not all browser support web components by default (Only Chrome and Opera by default). A web component polyfill needs to be added in case the app is to be run on other browsers. More details can be found in the github repository page: https:\/\/github.com\/WebComponents\/webcomponentsjs<\/a><\/p>\n By supporting ES6, Scala.js opens a wide range of possiblities: using web components is one of them. The possibility of using web components makes Scala.js an attractive alternative for developing web applications while staying in the confort of the Scala language and benefiting from the support of IDEs.<\/p>\n source code: https:\/\/github.com\/gwidgets\/scalajs-webcomponents-demo<\/a><app-element>\r\n<header-bar><\/header-bar>\r\n<side-nav ><\/side-nav>\r\n<main-area >\r\n <add-section><\/add-section>\r\n <list-section><\/list-section>\r\n <delete-section><\/delete-section>\r\n<\/main-area>\r\n<\/app-element><\/pre>\n
![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/coa.png\")
<\/a><\/p>\nImplementation<\/h2>\n
\n
build.sbt<\/code>:<\/p>\nscalaJSLinkerConfig ~= { _.withOutputMode(OutputMode.ECMAScript2015) }<\/pre>\nscalacOptions += \"-P:scalajs:sjsDefinedByDefault\"<\/pre>\n
\n
scalajs-dom<\/code><\/a>, so we will need to write facade types for those before getting started. The first one is the CustomElementsRegistry<\/code><\/a> object present in the global Window<\/code> :<\/p>\n@js.native\r\n@JSGlobal\r\nclass Window extends dom.Window {\r\n\r\n val customElements: CustomElementsRegistry = js.native\r\n\r\n}<\/pre>\n@js.native\r\ntrait CustomElementsRegistry extends js.Any {\r\n def define(name: String, definition: Any ) : Unit = js.native\r\n}<\/pre>\nwindow.customElements.define(\"add-section\", js.constructorOf[AddSectionElement])<\/code>, pretty much in the same way as described in the JavaScript documentation<\/a><\/p>\nscalajs-dom<\/code>.<\/p>\n@js.native\r\n@JSGlobal\r\nclass HTMLTemplateElement extends HTMLElement {\r\n\r\n val content: HTMLElement = js.native\r\n}<\/pre>\nattachShadow<\/code> method, we are going to extend it to add it:<\/p>\n@js.native\r\n@JSGlobal\r\nclass HTMLElement extends org.scalajs.dom.raw.HTMLElement {\r\n\r\n def attachShadow(options: js.Any) : org.scalajs.dom.raw.HTMLElement = js.native\r\n\r\n}<\/pre>\n\n
app-element<\/code> component connects between the side navigation side-nav<\/code> bar element and the main-area<\/code>. It needs to detect changes when a link is clicked on the side bar and route to the corresponding section. The custom elements specification defines lifecycle callbacks<\/a> that are executed when a particular event occurs. For example, we use here connectedCallback<\/code> to define the logic used by the component to route from a section to another. connectedCallback<\/code> is invoked when the element is connected to DOM. The general guidelines (e.g Google\u2019s guide to Custom Elements<\/a>) recommend to put all the setup code and logic inside the connectedCallback<\/code>. Our app-element<\/code> component looks like:<\/p>\n<template id=\"app-element-template\">\r\n<slot name=\"header-bar\"><\/slot>\r\n<slot name=\"side-nav\"><\/slot>\r\n<slot name=\"main-area\"><\/slot>\r\n<\/template><\/pre>\n
class AppElement extends HTMLElement {\r\n\r\n\r\n var template: HTMLTemplateElement = dom.document.getElementById(\"app-element-template\").asInstanceOf[HTMLTemplateElement]\r\n var shadow = this.attachShadow(JSON.parse(\"{\\\"mode\\\": \\\"open\\\"}\"));\r\n shadow.appendChild(template.content.cloneNode(true));\r\n\r\n\r\n def connectedCallback(): Unit = {\r\n initRouter()\r\n\r\n\r\n var sections = getMainArea().getAllSections()\r\n\r\n for (i <- 0 until sections.length) {\r\n var section = sections.item(i).asInstanceOf[MainAreaSectionElement]\r\n getSideNav().addLink(section.getName())\r\n }\r\n updateUI()\r\n }\r\n\r\n private def getSideNav(): SideNavElement = {\r\n return this.querySelector(\"side-nav\").asInstanceOf[SideNavElement]\r\n }\r\n\r\n private def getMainArea(): MainAreaElement = {\r\n return this.querySelector(\"main-area\").asInstanceOf[MainAreaElement]\r\n }\r\n\r\n\r\n def initRouter(): Unit = {\r\n\r\n dom.window.addEventListener(\"hashchange\", (event: Event) => {\r\n\r\n val hash = dom.window.location.hash.replace(\"#\", \"\")\r\n getMainArea().select(hash)\r\n\r\n }, false)\r\n }\r\n\r\n def updateUI(): Unit = {\r\n val hash = dom.window.location.hash.replace(\"#\", \"\")\r\n if ( !hash.isEmpty) {\r\n getMainArea().select(hash)\r\n } else {\r\n getMainArea().selectFirst()\r\n }\r\n }\r\n}<\/pre>\nwindow.customElements.define(\"app-element\", js.constructorOf[AppElement])<\/pre>\n
\n
list-section<\/code> and the delete-section<\/code> both render a table with the current expenses. The difference between the two is that the delete-section<\/code> needs to add a checkbox before each row to allow the user to select which expense to delete. Accordingly, we can make the delete-section<\/code> inherit from the list-section<\/code> element.<\/p>\n<template id=\"main-area-section-template\">\r\n <!-- styles where omitted for better readabiltiy -->\r\n <section> \r\n <div class=\"container\">\r\n\r\n <\/div>\r\n <\/section>\r\n<\/template><\/pre>\n
class ListSectionElement extends MainAreaSectionElement {\r\n\r\n var dataTable: HTMLTableElement = null;\r\n setName(\"List\")\r\n\r\n def connectedCallback(): Unit = {\r\n renderTable()\r\n }\r\n\r\n def renderTable(): Unit = {\r\n\r\n dataTable = dom.document.createElement(\"table\").asInstanceOf[HTMLTableElement]\r\n dataTable.classList.add(\"data-table\")\r\n val tableHeader = dom.document.createElement(\"thead\").asInstanceOf[HTMLElement]\r\n val idHeaderCell = dom.document.createElement(\"th\").asInstanceOf[HTMLElement]\r\n idHeaderCell.textContent = \"id\"\r\n val amountHeaderCell = dom.document.createElement(\"th\").asInstanceOf[HTMLElement]\r\n amountHeaderCell.textContent = \"amount\"\r\n val dateHeaderCell = dom.document.createElement(\"th\").asInstanceOf[HTMLElement]\r\n dateHeaderCell.textContent = \"date\"\r\n val reasonHeaderCell = dom.document.createElement(\"th\").asInstanceOf[HTMLElement]\r\n reasonHeaderCell.textContent = \"reason\"\r\n\r\n val tableHeaderRow = dom.document.createElement(\"tr\").asInstanceOf[HTMLTableRowElement]\r\n\r\n tableHeaderRow.appendChild(idHeaderCell)\r\n tableHeaderRow.appendChild(amountHeaderCell)\r\n tableHeaderRow.appendChild(dateHeaderCell)\r\n tableHeaderRow.appendChild(reasonHeaderCell)\r\n\r\n tableHeader.appendChild(tableHeaderRow)\r\n dataTable.appendChild(tableHeader)\r\n\r\n for (i <- 0 until dom.window.localStorage.length ) {\r\n val key = dom.window.localStorage.key(i)\r\n val expenseJsonOption = Option(dom.window.localStorage.getItem(key))\r\n if (expenseJsonOption.isDefined) {\r\n val expense = decode[Expense](expenseJsonOption.get).toSeq.last\r\n val row = dom.document.createElement(\"tr\").asInstanceOf[HTMLTableRowElement]\r\n val idCell = dom.document.createElement(\"td\").asInstanceOf[HTMLTableDataCellElement]\r\n idCell.textContent = expense.id\r\n val amountCell = dom.document.createElement(\"td\").asInstanceOf[HTMLTableDataCellElement]\r\n amountCell.textContent = expense.amount\r\n val dateCell = dom.document.createElement(\"td\").asInstanceOf[HTMLTableDataCellElement]\r\n dateCell.textContent = expense.date\r\n val reasonCell = dom.document.createElement(\"td\").asInstanceOf[HTMLTableDataCellElement]\r\n reasonCell.textContent = expense.reason\r\n row.appendChild(idCell)\r\n row.appendChild(amountCell)\r\n row.appendChild(dateCell)\r\n row.appendChild(reasonCell)\r\n dataTable.appendChild(row)\r\n }\r\n }\r\n getContainer().appendChild(dataTable)\r\n }\r\n\r\n def refreshUI(): Unit = {\r\n clear()\r\n renderTable()\r\n }\r\n}<\/pre>\nclass DeleteSectionElement extends ListSectionElement {\r\n\r\n setName(\"Delete\")\r\n\r\n override def connectedCallback(): Unit = {\r\n this.renderTable()\r\n }\r\n\r\n override def renderTable(): Unit = {\r\n super.renderTable()\r\n val rows = dataTable.querySelectorAll(\"tr\")\r\n\r\n val headerRow = dataTable.querySelector(\"thead > tr\").asInstanceOf[HTMLTableRowElement]\r\n val emptyHeaderCell = dom.document.createElement(\"th\")\r\n headerRow.insertBefore(emptyHeaderCell, headerRow.firstChild)\r\n\r\n for (i <- 1 until rows.length) {\r\n val row = rows.item(i)\r\n val deleteCell = dom.document.createElement(\"td\").asInstanceOf[HTMLTableDataCellElement]\r\n val deleteCheckBox = dom.document.createElement(\"input\").asInstanceOf[HTMLInputElement]\r\n deleteCheckBox.`type` = \"checkbox\"\r\n deleteCheckBox.id = row.firstChild.textContent\r\n deleteCell.appendChild(deleteCheckBox)\r\n row.insertBefore(deleteCell, row.firstChild)\r\n }\r\n\r\n val deleteButton = dom.document.createElement(\"button\").asInstanceOf[HTMLButtonElement]\r\n deleteButton.textContent = \"Delete selection\"\r\n deleteButton.classList.add(\"action-button\")\r\n\r\n deleteButton.addEventListener(\"click\", (event:Event) => {\r\n val rows = dataTable.querySelectorAll(\"tr\")\r\n for (i <- 1 until rows.length) {\r\n val row = rows.item(i)\r\n val input = row.asInstanceOf[HTMLTableRowElement].querySelector(\"td > input\").asInstanceOf[HTMLInputElement]\r\n if (input.checked) {\r\n dom.window.localStorage.removeItem(input.id)\r\n }\r\n }\r\n dom.document.dispatchEvent(new wrappers.Event(\"deleteExpense\"))\r\n })\r\n\r\n getContainer().appendChild(deleteButton)\r\n }\r\n\r\n override def refreshUI(): Unit = {\r\n clear()\r\n renderTable()\r\n }\r\n}<\/pre>\nDeleteSectionElement<\/code> not only uses the same table used by its parent ListSectionElement<\/code>, but also makes use of the render method and overrides it. Since AddSectionElement<\/code> (implementation can be found in the source code), ListSectionElement<\/code>, and DeleteSectionElement<\/code> all constitute sections of the main-area<\/code> and share the same template and the same initialization code, we can create a parent element for all of them to factorize the common initialization code and methods:<\/p>\nabstract class MainAreaSectionElement extends HTMLElement {\r\n\r\n var template: HTMLTemplateElement = dom.document.getElementById(\"main-area-section-template\").asInstanceOf[HTMLTemplateElement]\r\n var shadow = this.attachShadow(JSON.parse(\"{\\\"mode\\\": \\\"open\\\"}\"))\r\n shadow.appendChild(template.content.cloneNode(true))\r\n\r\n\r\n def getContainer(): Element = {\r\n return this.shadow.querySelector(\".container\")\r\n }\r\n\r\n def setName(name: String): Unit = {\r\n this.setAttribute(\"name\", name)\r\n }\r\n\r\n def getName(): String = {\r\n this.getAttribute(\"name\")\r\n }\r\n\r\n def clear(): Unit = {\r\n var firstChild = getContainer().firstChild\r\n while(firstChild != null) {\r\n getContainer().removeChild(firstChild)\r\n firstChild = getContainer().firstChild\r\n }\r\n }\r\n\r\n}<\/pre>\nMainAreaSectionElement<\/code> abstract to prevent its initiaization and force elements to inherit from it. The clear<\/code>, getContainer<\/code>, setName<\/code>, getName<\/code>, clear<\/code> are used\/overrided by all the child elements.<\/p>\n*-section<\/code> elements which is something the would not have been possible with the plain JavaScript implementation.<\/p>\n\n
list-section<\/code> and the delete-section<\/code> to re-render because a new element was added. Same goes for when deleting an expense. To do so, we have created custom events called addExpense<\/code> and deleteExpense<\/code> that we dispatch each time these events occur:<\/p>\ndom.document.dispatchEvent(new wrappers.Event(\"deleteExpense\"))<\/pre>\n
main-area<\/code> element, we listen to the events and take the appropriate actions:<\/p>\ndom.document.addEventListener(\"deleteExpense\", (event: Event) => {\r\n getListSection().refreshUI()\r\n getDeleteSection().refreshUI()\r\n })<\/pre>\napp-element<\/code> listens to hash link changes and asks the main-area<\/code> to select the desired section :<\/p>\ndom.window.addEventListener(\"hashchange\", (event: Event) => {\r\n\r\n val hash = dom.window.location.hash.replace(\"#\", \"\")\r\n getMainArea().select(hash)\r\n\r\n }, false)<\/pre>\n\n
Wrap up<\/h2>\n
\nRunning app: https:\/\/gwidgets.github.io\/scalajswebcomponents<\/a><\/p>\n