My two cents about the challenges of the web of tomorrow.

I recently switched to building web apps with web components, and during a meeting the question was raised about “How do we deal with these new technologies, old development went faster”. So I started to question myself “how can we adapt?”.

I started late in ICT, around 2007 and everybody said I was crazy for hopping on the HTML5 train. It would take years before the standard was there and then maybe already obsolete. But It seems that I made the right choice.

The major reason that I choose for HTML5 was because it would be the new standard period, there was no reason to avoid this, I just had to embrace it ASAP to become good in what I wanted to do, Web Development. I remember that I focused on ES5, HTML5 and CSS3, the bare bones of the web.

Today I see the same issues on the horizon, the only difference I see is that the tidal wave is much bigger. Not only do the bare bones change but also the architecture and the tools and libraries and above all an abundance of choice.

• React, Vue, Ember, AngularJS, Angular2, Angular2+, Angular4, Angular, Polymer, Skate, …
• Webpack, SystemJs, JSPM, Rollup, …
• Grunt, Gulp, NPM, Yarn, …
• ES6=ES2015, ES7=ES2016, ES8=ES2017, Typescript …
• Web Components
• single bind vs dual bind,
• Reactive programming,
• Streams,
• Redux, Flux
• … to name a few

So from now on we have to focus on a few key points, go back to basics and build op from there.

Technology

On a technology level I would take it easy and focus on the bare bones and standards and the basics of the libs and tools we use.

• Web Standards
• HTML5, HTML6
• ES2015 — ES2017
• CSS3, CSS4
• Web Components
• Custom Elements, Shadow DOM, HTML Imports, HTML Template
• Architecture
• App chrome, Composition, Inheritance, Loose-Coupled, Smart/Dumb Components, Reactive Programming, …
• First Load & Performance
• AOT, PWA, PRPL, …
• Testing
• I don’t have a lot of experience with writing tests myself, but as a lead if have picked the befits of it both in terms of code stability as well as team velocity and skill improvement.
• Pick a framework that makes you comfortable, in the end they all end up doing the same but each handles it in a different way.

When we are comfortable with this we can start Enhance Progressive.

• Redux
• Streams
• Native Script
• Electron
• finetune and review the libraries we are currently using
• …

I wrote an article about that Idea back in 2012 in “A Journey to a new workflow” and with some additions, the idea still stands today. The main idea is that you build up and only use the next layer if you can’t create your feature with the current layer, HTML -> CSS -> JS

• First layer is Base HTML = just HTML to create structure
• Second layer is Base CSS = fluid, color, font, widths, padding, position …
• Third layer is Base JS = toggle classes, getElement, UI stuff …
• Fourth layer is Advanced HTML = HTML5 semantic tags to create structure
• Fifth layer is Advanced CSS = responsive, pseudo-elements, pseudo-classes …
• Sixth layer is Advanced JavaScript = Canvas localStorage, Cache Manifest, WebGL …

“It’s a new technology, it’s immature and takes time to get it working in your company”

Analysis

I noticed in several projects using web components that analysis and estimates are a problem. I think this is because of a mismatch between the way it was and how we work today. Today’s tools are different so are the libraries and the architecture we use. It’s a new technology, it’s immature and takes time to get it working in your company.

Changing the technology impacts more then only the development department it’s a change in your company. Analysts should now about these changes, they have to now what’s the definition of reuse and what is a component and the difference between Smart and Dumb components and the Store. and the impact when passing data to several children.

Changing the technology impacts more then only the development department, it’s a change in your company.

And there are no blueprints anymore for estimates, they must be recalculated, tested and improved but in no sane way we can just take over the ones we are using for years now.

Training

I have trained several juniors in the past which all followed the same path:

• read & learn about the technology we use and setup everything following a guideline and adjust the guideline where needed
• follow the code reviews, everybody is allowed to follow and do code reviews, it even worked as a filter first juniors, medior and then seniors and the lead would approve the code, you will learn a lot this way but most of all why and even alternative solutions.
• integrate something like Stack Overflow, if a member in the company has to answer a question twice it should be added into the system. Everybody had to search and ask questions first in the system before asking somebody IRL
• fix priority 3 and 4 bugs, then 1 and 2
• around this time you have a good understanding of the skills and attitude of a person.
• when the time is right it’s time to write a compleet new part of the app from view to data handling and testing.

Keep in mind that this will only work if your company works as a team on all levels, it wil ask an extra effort of your staff, answering questions, manage people, update the systems, … Do know that this proces will have an impact, and cost’s your team velocity, but you will win this back once the developer is trained.

Sales

Sales has to know which technology they are selling, they must be able to explain the customer that there is a shift in technology and way-of-work. As I said before, “It’s a new technology, it’s immature and takes time to get it working”. This way the customer is already prepared about flexible deadlines, and experimenting or chooses to use a known technology.

Conclusion

About all the new stuff don’t be frightened but embrace it and take it step by step, make sure that whatever you have reviewed and use is something you know and understand, only then can you build on top of your current knowledge to implement new things.

Such a big change involves all departments and teams of a company, it’s a combined effort.

 

 

-- Als je vragen hebt, aarzel dan niet om Contact met ons op te nemen. We helpen je graag verder. We kijken er naar uit om je te helpen bij de groei van je bedrijf. © 2023 WebWizArt.be BV. 🇧🇪 🏳️ 🌈 🏴 ☠️ All rights reserved.