You don’t need React or Angular or Svelte or frameworks. How Object Oriented UI rises…

These are the days which people can’t code anything without a framework. We have heard many user interface frameworks like React.js, Angular.js Svelte and a lot more. But are they really needed for a scalable user interface? Do we really need to use them for organizing small chunks of code? Answers are no and no. What should I do if I want to compile everything in a single file? Do I need to use HTML for JSX or Angular components for small chunks of HTML? I’ll explain every thing one by one so hold on for a new and interesting understanding of an Object Oriented User Interface.

With the help of webpack, you can manage to compile your whole code to a single file. Our webpack seems complex but its very small code piece. You can place it in your node.js directory side by side your server file.

webpack.config.cjs

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  entry: './index.js',
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public/static'),
    },
    port: 1000,
    server: 'https',
  },
  mode: 'development',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  devtool: "inline-source-map",
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|mp4)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

html-webpack-plugin, style-loader, css-loader, sass-loader needs to be installed in package.json. In this case, I can use .sass or .scss files in the UI. You’ll need a very simple HTML file in the root too like this one :

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My OOP User Interface</title>
  </head>
  <body></body>
</html>

Now the fun part. As you see from webpack we have index.js as entry point. From starting this point exery thing should be coded with object oriented understanding.

Get Akif Volkan Ongun’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

index.js

class MyApp {

 constructor(){
  this.myProp = 0
  this.myString = "My String"

  this.initialize()
 }

 initialize(){

  // Do things with plain Javascript
  
 }
}

const myApp = new MyApp()

// for security reasons you shouldn't compile next-line. 
// but if you want to debug i won't stop you. this line is commented
// out intentionally and its dangerous. 

// window.myApp = myApp

And where is the template system? We were talking about discarding React.js, Angular or Svelte. Let me answer your question. There is a native solution to this problem. Also we’ll use template literals in the class-template system (this is what is call it) so let me introduce the code.

class MyApp {

 constructor(){
  this.myProp = 0
  this.myString = "My String"
  this.template

  this.initialize()
 }

 initialize(){
  
  this.generateTemplate()
  
 }

 generateTemplate(){
   let templateString = `<div class="myApp">
        <div class="AppContainer">${this.myString}</div>
      </div>`

    let parser = new DOMParser()
    this.template = parser.parseFromString(templateString, 'text/html')
    this.template = this.template.body.childNodes[0]
 }
}

const myApp = new MyApp()

First of all i created a method. “templateString” is in back-ticks and i can use class variables inside it as “this.myString”. Then i initialize a native solution of the template problem. new DOMParser(). What this does is it gets the templateString and it wraps it with html and body tags and crate HTML nodes from it. if you log it you’ll see;

<html>
  <body>
    <div class="myApp">
      <div class="AppContainer"></div>
    </div>
  </body>
</html>

this.template.body.childNodes[0] is the template we’ll work on. From this point we start on code plain javascript with query selectors and getElementByIds.

class MyApp {

 constructor(){
  this.myProp = 0
  this.myString = "My String"
  this.template

  this.initialize()
 }

 initialize(){
  
  // this method is a syncronious method. code
  // compiles instantly and will be ready for next line
  this.generateTemplate()
  
  this.template.querySelector(".AppContainer").innerHTML = "Hello World"
 }

 generateTemplate(){
   let templateString = `<div class="myApp">
        <div class="AppContainer">${this.myString}</div>
      </div>`

    let parser = new DOMParser()
    this.template = parser.parseFromString(templateString, 'text/html')
    this.template = this.template.body.childNodes[0]
 }
}

const myApp = new MyApp()

Object oriented seems hard to understand. And it creates a small communication problem between classes. On part 2 I’ll discuss and write about EventEmitter, class communication and how this approach is very powerful.

Thanks a lot and have a great day.