Rethink web development

An article about progressive web applications and simplicity.

How we can rethink web development to make it easy / less complicated again?
Everyone enjoyed back then in the past when web development was just html, css, and a litle of javascript.
Bigger projects bring us new ways of programing a new kind of webs [applications].

With the ‘do it clientside’ era, tons of javascript invade us and the solution was to bring and implement heavy frameworks to save the projects.

Why this happens? Its really simple if we look to the past. The need for complexity made us to consume asyc content (hello ajax). In order to show this content and to benefit from it, we needed to ‘load’ things dynamically. That’s means we soon stop doing full pages reloads and the ‘single page applications’ were born.

Web ‘point of view’ was to be an static oriented tool. You download it from a remote server, you render it, that’s it, there is your information. Javascript grow up to fight about this point of view. To make the web mutable.

You can read a lot in internet about this. I just will mention the follow facts:

- Web borns serverside
- Serverside means we hit and fetch ALL our web assets from remote server every time a full page reload happens. Simple.
- Web development clientside appears (with ajax and dynamic web sites)
- Clientside means we hit a remote server (or a local if its mobile), fetch our web assets, and from that point we play with ajax and load things dynamically, WITHOUT doing a full page reload.

After 2005, or near that date, client side web development start being popular. Jquery was the rockstar. Then tons of frameworks came.

The fashion after 2015 and beyond is that popular clientside frameworks like react or angular has the capability of rendering dynamically in the server the first time we hit the remote server so the boot up of our web is faster because the first render of ‘dynamic content’ is just an static page. Next, the framework boot up things works like normal. People call this kind of project ‘universal’, because the framework can perform server and client side.

I dont want to write too long because you probably know the rest of the history. Web development in 2017 is a nightmare for new developers.

Next, I will write down my point of view about several aspects of web development, how we do it today, and how I would do it if someone ask me to ‘rething web development’.

Terminology

Cache: Clientside cache. A way to store things locally and reduce HTTP calls and latency.
Shell: html, css and js code that doesn’t change too often and surround the web app dynamic content.
ServiceWorker: Clientside javascript running in background.
Stateless function: A function without memory, input -> output
Factory: An stateless function which returns a Service.
State function / Service: A function with memory, state, which usually returns an object to operate.

What about Progressive web applications?

I will not enter in details, you already read a lot about it. PWA apps are the future and mobile web apps, native apps and installable apps in general will lose market terrain.

Progressive web applications are meant to be used by any device in the world beyond technology and conectivity. They use Cache to prevent Shell from loading too often and reduce latency. PWA apps should render in seconds, feel native, support the latest browser capabilities and fallback to support any browser. Finnaly, the should work offline too, like a mobile app.

What do you want to rethink?

Several aspects, I will write down some categories and expand there:

HTML

Separated file? format? preproccesors?

Doesn’t matter.

If you want a fast DOM here are some facts:

  • Use available tags only. (We are in a component era but your <timer></timer> is just not ok)
  • Use available attributes only. (Don’t invent things like ng-click, data-reactive, etc)
  • Use an small tag declaration as much as possible. Lenght of outerHTML.
  • Use an small html. I’m talking about the length of the entire html being rendered.
  • Use dynamic dom changes as litle as possible.

Html is a basic language and DOM render capabilities is limited. We should not abuse of him.
Popular frameworks like polymer, angular and several more and doing it all wrong when they do not respect the facts I mention above. That’s my opinion.

I propose we use basic html and change his behaviour using javascript only.
This will boost SEO for web apps and code will be less complicated to understand.
Even a dog would understand our code if we start coding again like in the ninenties. But with the knowloadge of today.

CSS

Separated file? format? preproccesors?
Doesn’t matter.

Preproccesors are doing a great job. Some times they complicate things a bit.
I don’t have any advices for the moment.
I would like to hear opinion from people about this area.

JAVASCRIPT

Classes? preproccesors? bundling? what?

Doesn’t matter.

JS is a functional programming language. Let’s keep it as it is.
Programmers have a hard time learning they way they should code using each framework.

I propose an standard way to code, were every function is stateless, short, accurate. Useful. A big open source database could exists where developers can share the material.

Javascript is powerful but you can abuse easily because of his restricteless nature.

What about Angular and React?

We could still use these tools. But we can also start implementing new micro-libraries that do the job easier and simpler.

I imagine a world with more:

  • Stateless, Factory and Service funcions.
  • Usage of global functions rather than classes (avoid new keyword)
  • Abstraction

And less

  • Classes
  • ‘new’ keyword
  • Duplication

I have no anwser for everything. I just writing down some tips and thoughts.

Reactivity and Virtual-dom

Virtual dom should be rethinked as well.
Why we can’t create a virtual-dom basend on the current rendered dom rather than from the scratch?
Why we can’t use the current dom (detached, cloned) to make the changes and update the main dom carefully?

We need to learn about React and keep evolving. Seems like Virtual-dom can’t be simpler than that but why we try to guess while we can go for it and try to improve that. Preact is the perfect example of that search for simplicity and efficency.

Third party libraries and bundling

We should use only CDN libraries. Every third party library should be loaded using CDN and should use the global space rather than being encapsulated and part of the transpiling and bundling proccess.

Today bundlers like Rollup allow you to do tree shaking:

“Rollup also statically analyzes the code you are importing, and will exclude anything that isn’t actually used. This allows you to build on top of existing tools and modules without adding extra dependencies or bloating the size of your project.”

But libraries should be loaded from CDN and behave like google map.
www.google.com/api/?library=map,sites
www.cdnlibraries.com/goodguylib?take=RouterFactory

That call should fetch a bundle with RouterFactory available as well as all the dependencies of RouterFactory (Services and stateless functions). All bundled and ready to be used in the global scope. Tools like rollup should not be neccesary. We are doing it wrong.

ES6 / ES7 / Transpiling / Bundling

With the CDN and third party libraries opinion above, I think bundling should be super easy and faster.

Services and Factories could be coded in ES7 and transpiled meanwhile stateless function are packed separatly just concatening and bundling the code.

Speed dating questions

CSS Preproccesor?
I like Saas

First Language you coded?
Pascal

Favourite color?
Black

Backend or Frontend?
Give me a break!

Music bands?
led zeppelin, deep purple and movies soundtracks.
M83, rudimental!

Job Position?
Fullstack Javascript. Contractor.

Hobbies?
Startup ideas, traveling, trekking

A business Idea

Lets build a web platform were freelance developers and companies can work
allowing them to build a PWA app from the scratch. Optimized. Lighthouse 100%. With wysiwyg tools to build your stack and code structure. With an integrated marketplace where you can sell your stateless function that runs 100ms better than others. I’m creazy, right?

Conclusion

Progressive web applications…. I did not write too much about them. But we should start using them some time soon. They came here to stay.

Take a look at this site.

Thank you for reading!

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade