Dedicated web developer, web renegade & customer relations professional - My clients love me, and you will, too!
call 602-334-7771 today

Why I am a Renegade

• May 28, 2022
• By Richard Whitney
• Comments
• Last edited: Sun Jul 03 2022

In this day and age it seems like everyone is using the trendy tools for front-end web development, just because they are new and shiny.

I personally believe in the tried and true methods. I use mostly plain JavaScript (ECMAScript 6/7), HTML5 and CSS3, with a little jQuery mixed in.

I mean, I can understand why you might want to use a cordless drill instead of a wired one but, when it comes to writing code, I don't understand why you would want to make it harder to write than just plain code. React, for instance, is a modern JavaScript framework that creates HTML:

                            
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}>/div>;
  }
}

root.render(<HelloMessage name="Taylor" />);
                            
                        

Using plain JavaScript and EJS with Express (from the server), I can write the same thing like:

                            
//server side code
app.get('/user/:name', (req, res) => {
    res.render('index', {name: req.params.name, filename: 'users'});
});

//client side
<div>Hello <%= name; %></div>
                            
                        

This code is ready for any name in the url. I can't see how to do this with React. Do you need to hard-code every name? Someone please enlighten me.

And, to adhere to the DRY principle (Don't Repeat Yourself, with which I do comply), I write a 3 line index file like this:

                            
<%- include('header.ejs'); %>
<%- include(filename); %>
<%- include('footer.ejs'); %>
                            
                        

where filename is the name of the requested route like this:

/why-i-am-a-renegade

'header' and 'footer' are static files that hold, well, the header code and the footer code. The body in between is the contents of the included filename. All 3 assets can hold dynamic data, served by the ejs node module.

Now, in the case of this blog, I have a different 'index' file that looks like this:

                                
<%- include('header.ejs'); %>
<%- include('blog-header.ejs'); %>
<%- include(filename); %>
<%- include('blog-footer.ejs'); %>
<%- include('footer.ejs'); %>
                                
                            

The blog-header file holds the image at the top of this blog post and the blog-footer file holds the About Me and the Leave a Comment section. This article is held within the 'why-i-am-a-renegade' file. Simple as that.

I find this approach to be more understable and pretty simple, as far as programming goes. You know the KISS method, right?

Well, that's it in a nutshell. I am a Renegade, are you?