DEV Community

EDDYMENS
EDDYMENS

Posted on

Substituting JavaScript with HTML

So probably by now you are thinking of how in the world will HTML ever substitute Javascript.

Well I didn’t mean it literally. But then in some vain its possible.

How we write code

Have you ever worked on a project were you realised between views you kept writing the same piece of code to get or send data back to your server ?

The most obvious solution is to refactor and have this common part as a class, object, method , function, routine or whatever we do these days. So we can call on this same piece across multiple views.

Going a Step further

But then its only a few developers who go ahead to refactor the bulk of reusable code into refined libraries which can be used outside the original project.

As a matter of fact once you begin to create libraries out of projects you work on you will begin to notice growth. By growth I mean you feel like an engineer because you spend time putting these libraries together to finish projects and spending your spare time patching and fixing these libraries and this expands the dept of your thinking. I must say its a very fun experience.

Show Me Proof

I recently transitioned from building end user applications to focusing more on developer tools @Devless .

I work on not only speeding up the software development process but also making sure its one that scales. One of our flag ship release is a backend framework that is ready for building SAAS applications right out the box.

When we first launched we released a couple of SDKs to work with the framework including JS, RUBY, PHP and PYTHON . As part of our business model we also work with developers on enterprise apps. These projects usually serve as the point of truth for our framework . During such projects we get to know how much speed DevLess provides as far as rapid development goes and can it actually scale in production.

Over the last couple of months I have learnt alot. One of the things I found was that we were writing too much JS even after refactoring the most common used JS code into functions and objects. Well other things contributed to the excessive writing of JS but thats for another post.

Example: We had up to 8 form submissions and about 12 points where we displayed data . I began getting worried each time I had to put together a form then have some binding JS code call on the submission function to send this data over to the DevLess framework. So I set off to do something about it .

The AHA! Moment


https://formspree.io/

I don’t remember how I found Form Spree but the moment I saw the example on the page, something struck me . I realised the reason I still had to tell my forms about the JS functions was because I hadn’t taken Separation Of Concerns to a higher level . I quickly began to look at implementations close to Form Spree like Bootstrap and that completed the other half of the puzzle.

<button class="btn btn-warning">Submit<button>
Enter fullscreen mode Exit fullscreen mode

With the addition of classes I can enjoy all the custom CSS Bootstrap provides for the most part of what we need as far as styling goes . Why can’t we have same for JS ? It turns out we actually do and such libraries are known as UnObstrusive JS libs.

So we came up with a solution for sending data back to the backend with little or no Javascript at all.

So for instance the sample code below is used to submit Data to a table labelled details. Note the class dv-add-oneto:profiles:details thats all you need to submit the form below to DevLess .

So now the JS library listens on the special classes and acts accordingly. This as opposed to what we had earlier is that now for N number of times we work with data from the backend the JS code responsible for it is the same . So for instance if you compare JQuery to Bootstrap. whereas you write some amount of JS to use JQuery you don’t write any CSS to use the Standard components within Bootstrap.

Cool, What Next

In the spirit of open sourcing everything and anything at DevLess we will be extracting the HTML SDK from DevLess and make it possible to use this with other frameworks as well. Also its important to note that the HTML SDK is not a magic bullet for all kinds of Data work. For some instances you may need to use other SDKs or write custom code for that. But at least now we get to keep what should be simple simple.

You may Checkout the Docs below for what more you can do with the HTML SDK :

Adios

Alright this is were I say bye so please remember to Share , Love and comment down below. Oh! yh you can hit my up via email edmond@devles.io , or @eddy_mens on twitter

By clapping more or less, you can signal to us which stories really stand out.

EDDYMENS

“Don’t worry about what anybody else is going to do. The best way to predict the future is to invent it.” Innovate or die ;)

DevLess

DevLess is a platform that allows you to easily build robust backends for your web and mobile applications by piecing together plug and play backend modules.

Discussion (2)

Collapse
lexlohr profile image
Alex Lohr

So you replaced 8 Scripts with one generic script and changed HTML. Good job, congratulations. Still, that doesn't mean that you actually replaced JS with HTML.

The other way around also works: write your page in vanilla HTML/CSS, with no JS at all and make it work. Now use JS to enrich your customer's experience. Now you switched your development pattern from graceful degradation to feature enhancement.

Collapse
eddymens profile image
EDDYMENS Author • Edited on

I actually enjoy the second approach more. Unfortunately, its much harder to package that up as a tool as its something best taught. In the case of the above the end goal was to have a tool that covered both vanilla HTML/CSS and considered the experience all as one.