StealthyCoder

This post is about something that is trending and me and a close friend of mine who were discussing this were both baffled by this trend. We simply don't get it. There was once the web in all it's glory in the 90s. It was only HTML. That was it. There was a markup language that showed you what needed to be put where. Then there was some styling but not a lot really.

So that had to change and in came CSS. Now you could better style the webpages. HTML for structure and CSS for look and feel. Perfect. However, this all was still static. It would be nice to add something to it that could dynamically update a page without reloading or just fetch data dynamically. In comes JavaScript. So we got the holy trifecta, HTML, CSS and JS.

Nowadays though, they feel everything should be able to be done from within JS ?!?!?!?! That is what React feels like to us.

render( {}, { todos, text} ) {
    return (
         <form onSubmit={this.addTodo} action="javascript:">
             <input value={text} onInput={this.setText} />
            <button type="submit">Add</button>
            <ul>
                { todos.map( todo => ( <li>{todo.text}</li> ) ) }
            </ul>
        </form>
  ); 
}

So we just wrote JS that contains HTML that contains JS that contains HTML. That has got to be the ugliest way to write HTML.

In addition to all this, is the fact that React is a library . It is not a framework . Always a fun question to ask during interviews, what is the difference between them? Well a library is code you use, a framework uses your code. That might sound vague, but in essence this is correct. You would use code from a library that does something specific. For example query DuckDuckGo and return the first result. A framework is something that is built for you to place your specific code in but it handles everything else. Angular is a framework in contrast to React.

What we like about Angular is it splits everything up nicely. You have HTML files for the structure, (S)CSS for the styling and then JS for making it dynamic. Although you only provide your code, Angular makes sure it works. There is a whole bunch of extra layers around it you don't see and know about in order to make it all work. That is beauty.

In the similar line exists the Polymer framework, from Google. It is based around the idea of Web Components and uses the <template> and <slot> tags from the HTML5 spec. Definitely worth a look.

The other issue that arises from using a library in contrast to a framework is that you have no clear same structure. You are left to choose your structure. However you want, as long it works it will be okay. In Angular you don't have that luxury as much and that is why we like it more. It is less gun-ho and cowboy style compared to React. You have to follow the structure they dictate in order to make it work. That means Angular codebases over all are predictable, uniform and that in turn makes it so Angular developers can switch projects relatively easily. In React we don't have that guarantee, so it is wildly different. Unless you had a disciplined dev, the odds are some corners were cut or some breaking away of the mold was done in order to make something work.

So our advice, write HTML, CSS and JS separately and do not try to smoosh them all together. Along a similar vein I will leave you with this.

#devlife #devops #thoughts