\"We need to re-write EVERYTHING!\"... It's understandable that a huge technical debt is created during the first period of building a company app, a lot of business needs, a lot of deadlines and smaller teams. And for webapps where a proper frontend solution was not considered, most of this technical debt falls on frontend and by time it becomes harder and harder to refactor till it reaches a point where the right way to refactor it is to re-write it. But that's not an option sometimes, isn't it?
\nAs an alternative, This article will introduce two approaches to integrate lightweight react apps (we will call them widgets) that can be embedded in any project.
\nReact widgets implemented directly in your codebase.
\nCreate a similar folder structure to this:
\n.\n├── server\n └── ....\n├── frontend\n ├── widgets\n ├── login.js\n └── subscribe.js\n └── components\n ├── Login.js\n ├── Subscribe.js\n └── ....\n├── dist #ignored\n ├── widget_login_bundle.js\n └── widget_subscribe_bundle.js\n├── webpack.config.js\n└── package.json/frontend/widgets directory will contain entry points for all the widgets, each file inside should render a react app in a corresponding DOM element id
For example /frontend/widgets/login.js
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Login from '../components/Login';\n\nReactDOM.render(\n <Login />,\n document.getElementById('widget:login'), // <-- NOTE the element id\n);webpack.config.js will look like this
module.exports = {\n entry: [\n './frontend/widgets/login.js',\n './frontend/widgets/subscribe.js',\n ],\n output: {\n filename: 'widget_[name]_bundle.js',\n }\n ...\n}Now running webpack from the project folder will create two bundle files widget_login_bundle.js and widget_subscribe_bundle.js in the dist folder.
Now you can use a widget in one of your views like this
\n...\n<div id=\"widget:login\"></div>\n<script defer src=\"/dist/widget_login_bundle.js\" />\n...In this approach we will keep all frontend in a separate repository and have an npm script to generate an html and bundle js file for each widget and upload them to a CMS.
\nBut first, A new database model need to be introduced that will hold the widget data (name and html) and there should be a way to upload assets to a content server.
\nFor example you may expose two web service APIs similar to this:
\nexample.com/api/widget/save-or-update (Save or upload a widget entry in the database)example.com/api/content-server/upload (Upload an asset file to content server)The folder structure will be similar to the previous approach but this time in a separate repository:
\n.\n├── frontend # Same as before\n├── dist # Same as before\n└── scripts\n ├── deployWidget.js\n └── ....\n├── webpack.config.js\n└── package.json/scripts/deployWidget.js is a nodejs script that expects a --widget argument and will do the following:
const path = require('path');\nconst argv = require('yargs').argv;\nconst uploadAssetToContentServer = require('./uploadAssetToContentServer');\nconst createOrUpdateWidgetEntry = require('./createOrUpdateWidgetEntry');\n\nconst deployWidget = async ({ widget }) => {\n const bundleFile = path.join(\n process.cwd(),\n 'dist',\n `widget_${widget}_bundle.js`\n );\n const uploadedUrl = await uploadAssetToContentServer(bundleFile);\n const html = `\n <div id=\"widget:${widget}\"></div>\n <script defer src=\"${uploadedUrl}\"></script>\n `;\n await createOrUpdateWidgetEntry({\n name: widget,\n html,\n });\n console.log(`widget ${widget} deployed successfully`);\n};\n\ndeployWidget({\n widget: argv.widget,\n}).catch(console.error);NOTE: I encapsulated the logic to upload the bundle file and save widget entry in uploadAssetToContentServer.js and createOrUpdateWidgetEntry.js respectively, which you will need to implement.
In package.json
...\n\"scripts\": {\n ....\n \"deploy-widget\": \"webpack && ./scripts/deployWidget\"\n}And now to deploy the login widget:
\nnpm run deploy-widget -- --widget loginGoing back to the backend repository, You can render a specific widget using the html value saved in DB, for example
\n...\n{{ getWidgetHtmlFromDB('login') | raw }}\n...For Standalone Approach
deployWidget.js script.deployWidget.js to deploy widgets to QA env. and create the scary-red \"Move to production\" button in QA CMS to just copy the entry from QA DB to Production DB.A hybrid social life has begun in the spring of 2023 after the pandemic. We have experts at AUTO1 Tech that have been invited to different public speeches.
\nOn May 25th 2023, our Director of Software Quality Assurance, Alexander Gyulai, gave a session on the topic of MODULAR AUTOMATION at TEST AUTOMATION DAYS 2023, where networking with software testing professionals and learning from the world’s leading test automation experts.
\nHe focused on topics of scaling, architecture and collaboration in automation testing. And the details covered in
\nHow and why to move common components into modules and how to re-use it across the company.
\nHow did we scale testing of our platform with 700+ services and hundreds of releases per month.
\nSetup release and distribution process of the automation modules
\nIntegrate platform modules into automation components
\nBesides technical advantages, he also shared how this approach improved collaboration and communication between developers and quality assurance engineers.
\nFabian Schomm-von Auenmüller, Head of Data Platform, was interviewed in July by the Data For Good Podcast, which is hosted by Zuma, a recruitment agency focusing on data technology professionals in Berlin.
\nIn this interview, Fabian focused on the monitoring and assurance of data quality within data pipelines. He explained that data observability encompasses processes from logging to monitoring, alerting, and ensuring data quality throughout its lifecycle. Fabian emphasized that catching data issues early is crucial for maintaining trust and preventing downstream problems. He recommended initiating data observability practices as early as possible and discussed tools like Elementary that integrate well with DBT (Data Build Tool). He highlighted the benefits of having explicit tests to validate assumptions and being prepared for failures. Fabian anticipates that future trends in data observability might involve leveraging AI and machine learning for pattern recognition and anomaly detection, ultimately enhancing the quality and reliability of data pipelines.
\n\nWe are proud of Alexander and Fabian and their works that provided an insight to the everyday projects and challenges the Technology team at the AUTO1 Group manages. We hope you find these as interesting as we do. We all grow along with the company, as does our data and infrastructure. Let’s work SMARTER instead of harder!
","fields":{"slug":"/back-to-social-life-at-auto1-tech/","tags":["auto1","engineering","social","qa","dataengineer"]}}},{"node":{"id":"43c570a3-c0cd-5599-ad87-bb0667eab8b0","frontmatter":{"category":"Social","title":"Product meets QA - Tech Talk by Antonella Zagaria & Alexander Gyulai","date":"2020-06-22","summary":"The second AUTO1 Group Tech Talk is now available in video format, featuring Antonella Zagaria, Senior Product Manager and Alexander Gyulai, Director of Quality Assurance.","thumbnail":null,"authorName":"Alex Stoicescu","authorDescription":"Alex is Tech Community Manager at AUTO1 Group.","authorAvatar":{"relativePath":"pages/QA-meets-Product-Tech-Talk/avatar.png","childImageSharp":{"resolutions":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAACyElEQVQ4y4VUO2gUURR9mZmN8YcItoKVjeXuzsxu9jOzm92NkBBTqDEmjZAEgtqIpSgI1gp+uhS6kEI7wc7GQsFCLERiISGCaGHhF02yu+M5s/cujyC4cJY379573r3n3XdNvV51xsYiJ4rKbqlUyBj8wjAYyWazp4BVYB3YAraBDeAhMBcE/l76lkrFTLVachuNyCGXEbJMrVbx6ADnaWAtn88nvu8nWBMdQcJ9Auv3wCxjWq2aC9IMSF3DzCyyG1YAs9pSYkL2melmLpfT71tKGkUlz2iZJAuCgA5dEjGAwPoV0AbuAy+tfR7YkZjb5CiXR1OutEw5jWQdCfgCnEiSxNg/7LWAj+KTSiHSzBvrAtascrriPCmnDkP4AYQ0Em3TGPHf8P38ARpP/4PsHQ7aU69Hqdi4OJeI47JXLg9IX1tVbUuWCzSsygcJO+L0goGNRpySoB1colarerhEvcCn4tuxCB/TsC5ZdS3Ct2Ho75uZmRoigWbIbgCxt7Q0O8TLsgg17o2R2+JHzzJcV/1IoBlybel42SLsCcc3I6UqoaZ+lUHFYjjCzJSQa+4J4UVLKiX8ScOGVXJXDN+xd7SfZXFYS65U+n2Wz+cOw+ezHadSkfCRdVJiZdlmMG9ZtHMpgWR3Z0eMSvWExjmrbXoCbZ951dIim7Yk6u1IYtlwavChW51Pp01tXOwf01eC9RHs/Rbbnx2Hf4IUh/Q5zdol8H3KG22Pj9edOK54LF1876pd37TELhqdZ+J4MwxDHUvXgDOFQrB7YqLpjI4WdhG8GLYNbCeBK/1+TWNWRG+Pfy5Hj5Dek3IXzX9+8DkL/AIeLC/PDU1NHXdSQk5altNsDkjPAT+ArzKyFnK5bB2IxbYik4hanmfM5GTL6Q/Y2DUc25y0HLToubR8TI39cL4APJOxr/35AXgOXEJnHKQvepP6eiQj119kDrZjqLo8HAAAAABJRU5ErkJggg==","width":50,"height":50,"src":"/static/26a7a327ccc4b335712e5a7086f2b26d/45876/avatar.png","srcSet":"/static/26a7a327ccc4b335712e5a7086f2b26d/45876/avatar.png 1x,\n/static/26a7a327ccc4b335712e5a7086f2b26d/eb85b/avatar.png 1.5x,\n/static/26a7a327ccc4b335712e5a7086f2b26d/4f71c/avatar.png 2x,\n/static/26a7a327ccc4b335712e5a7086f2b26d/9ec3e/avatar.png 3x"}}},"headerImage":null},"html":"Hello, colleagues, friends, readers and all of you excellent people out there!
\nIt's been a while, right? Let's pick up where we left off...
\nOur second Tech Talk took place in February at Maze, an event space fashioned after the Berliner spirit. Antonella and Alexander attracted almost 100 people with their promise of delivering amazing content, while having two different tracks allowed for the exposure of the participants to other vital parts of a tech start-up/unicorn.
\nThis event, the second in a series of events meant to promote local growth and accelerated learning, is now available for everyone to enjoy, on Youtube, along with the slides from the presentations.
\nAntonella Zagaria - Localisation in an ever-growing startup\n\n
\nAlexander Gyulai - SHIFT your testing gear\n\n
\nAs always, sign up on our community page on Meetup.com to stay up to date and be amongst the first to find out when our next event is going to be. And it might be sooner than you think ;)
","fields":{"slug":"/QA-meets-Product-Tech-Talk/","tags":["auto1","engineering","social","tech talks","product"]}}},{"node":{"id":"2bf7354b-946c-5b99-826e-3c9ebed6b92c","frontmatter":{"category":"Social","title":"How to build a data-driven unicorn - Niv Liran","date":"2020-01-23","summary":"Watch the full video of the first AUTO1 Group Tech Talk, featuring CPO Niv Liran.","thumbnail":null,"authorName":"Alex Stoicescu","authorDescription":"Alex is Tech Community Manager at AUTO1 Group.","authorAvatar":{"relativePath":"pages/how-to-build-a-data-driven-unicorn-with-niv-liran/avatar.png","childImageSharp":{"resolutions":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAACyElEQVQ4y4VUO2gUURR9mZmN8YcItoKVjeXuzsxu9jOzm92NkBBTqDEmjZAEgtqIpSgI1gp+uhS6kEI7wc7GQsFCLERiISGCaGHhF02yu+M5s/cujyC4cJY379573r3n3XdNvV51xsYiJ4rKbqlUyBj8wjAYyWazp4BVYB3YAraBDeAhMBcE/l76lkrFTLVachuNyCGXEbJMrVbx6ADnaWAtn88nvu8nWBMdQcJ9Auv3wCxjWq2aC9IMSF3DzCyyG1YAs9pSYkL2melmLpfT71tKGkUlz2iZJAuCgA5dEjGAwPoV0AbuAy+tfR7YkZjb5CiXR1OutEw5jWQdCfgCnEiSxNg/7LWAj+KTSiHSzBvrAtascrriPCmnDkP4AYQ0Em3TGPHf8P38ARpP/4PsHQ7aU69Hqdi4OJeI47JXLg9IX1tVbUuWCzSsygcJO+L0goGNRpySoB1colarerhEvcCn4tuxCB/TsC5ZdS3Ct2Ho75uZmRoigWbIbgCxt7Q0O8TLsgg17o2R2+JHzzJcV/1IoBlybel42SLsCcc3I6UqoaZ+lUHFYjjCzJSQa+4J4UVLKiX8ScOGVXJXDN+xd7SfZXFYS65U+n2Wz+cOw+ezHadSkfCRdVJiZdlmMG9ZtHMpgWR3Z0eMSvWExjmrbXoCbZ951dIim7Yk6u1IYtlwavChW51Pp01tXOwf01eC9RHs/Rbbnx2Hf4IUh/Q5zdol8H3KG22Pj9edOK54LF1876pd37TELhqdZ+J4MwxDHUvXgDOFQrB7YqLpjI4WdhG8GLYNbCeBK/1+TWNWRG+Pfy5Hj5Dek3IXzX9+8DkL/AIeLC/PDU1NHXdSQk5altNsDkjPAT+ArzKyFnK5bB2IxbYik4hanmfM5GTL6Q/Y2DUc25y0HLToubR8TI39cL4APJOxr/35AXgOXEJnHKQvepP6eiQj119kDrZjqLo8HAAAAABJRU5ErkJggg==","width":50,"height":50,"src":"/static/26a7a327ccc4b335712e5a7086f2b26d/45876/avatar.png","srcSet":"/static/26a7a327ccc4b335712e5a7086f2b26d/45876/avatar.png 1x,\n/static/26a7a327ccc4b335712e5a7086f2b26d/eb85b/avatar.png 1.5x,\n/static/26a7a327ccc4b335712e5a7086f2b26d/4f71c/avatar.png 2x,\n/static/26a7a327ccc4b335712e5a7086f2b26d/9ec3e/avatar.png 3x"}}},"headerImage":null},"html":"Back in November 2019, we had the pleasure of hearing from our Chief Product Officer, Niv Liran, about the makings of a data-driven unicorn. This event, the first in a series of events meant to promote local growth and accelerated learning, is now available as a video, along with the slides from the presentation.
\n\n
\nAs always, sign up on our community page on Meetup.com to stay up to date and be amongst the first to find out when our next event is going to be.
","fields":{"slug":"/how-to-build-a-data-driven-unicorn-with-niv-liran/","tags":["auto1","engineering","social","tech talks","product"]}}}]},"authorArticles":null},"pageContext":{"slug":"/embeddable-leightweight-react-widgets/","tags":["auto1","engineering","react","widgets","refactoring","modularity"],"category":"Social","author":"Kareem Elbahrawy","date":"2018-12-11"}}