What Could Be The Good Architecture – UI
I know this is not a universal Architecture and it vary project to project, maybe this structure contains some redundancy because it cannot suit your project but I guess It’s a good start point.
Creating a good and maintainable front-end architecture is an important step to start a web application or a website.
Best practices are important, but what about the architecture that can be maintainable in future?
Before we start, we need to understand couple of things:
- Is my project multi page? (a web app or website).
- Is my client required responsive website?
- Do I really want my final product maintainable?
- What about the adequate or excellent level of performance or efficiency.
- Do I need to focus on reusable template?
The Best tools which can help us
We have lot of nice tools that can help us creating the prefect (ok not perfect but good) application workflow. So, in respect of multi-page project and responsive website we need to breakpoint based CSS architecture that could help us for multiple devices.
So, too much of CSS and files can be very messy so we will implement CSS preprocessor (SASS)
For the excellent level of performance and efficiency module bundlers like webpack and yarn for task runner and yeoman for the reusable template.
Maintain the workflow
All the application always has libraries, plugins and js and css files for different purpose.
To maintain all files means working with different technologies and putting them together and build a good front-end architecture.
We have to manage a big workflow that contains different technologies and that’s why we need to organize in folders and maintain the best practice, good convention and standards to keep code and architecture clean.
We can divide our all components into different and separate group as below:
- SCSS files
We can further divide the group.
- libraries (Example: angularjs)
- plugins (Example: angularjs plugins)
- controllers (I mean controllers such as angularjs controllers)
So, This is how we should organize the architecture.
We will add all images files in Images folder: .png, .jpg, .jpeg , wallpapers etc.
We will add all all.js files in js folder and maintain in subfolders as follows:
This is the folder for controllers, each file has the name respective to the view. For example, if your index.html needs an angular controller, you should create a file like this: project\js\controllers\index.js.
Plugin need dependencies to work. So here is why I created a different folder:
We created this folder for all the presentational stuff. each file has the name respective to the view. For example, if your index.html needs some js functionality and plugins initialization, you should create a file like this: project\js\views\index.js, that has its own document ready.
This folder contains all css from maintain the scss files. For example home.scss will generate the corresponding home.css file in this folder.
Even for the CSS files I am distinguishing between libraries and plugins
We decided to put scss files of whole project pages in this directory
The framework folder will be organized as follows:
_variables.scss, _mixins.scss, _forms.scss, _input.scss
And here is the responsive part., then just rewrite rules and declare them for any other screen resolution or use bootstrap.
The final Architecture
We know that Webpack is not a task runner, so should we use grunt or gulp now?
We need to do is define your tasks in the scripts section of your package. json file:
“build”: “node build.js”
You can use NPM or Yarn as a task runner:
$ yarn run build
I would recommend to create your own architecture or framework as per your requirement for better performance and without redundant stuff