Architecture: Web app[front-end] from scratch 2021 - part 2

Architecture: Web app[front-end] from scratch 2021 - part 2

Part 1 - link

  • Coding style guide
  • Theme customisation
  • Es-lint and Prettier
  • Git pre-commit hook
  • Internationalisation

Code style guide

via GIPHY

     Every product use multiple language and tools like SCSS, ReactJS / VueJS/ EmberJS,  Handlebar, HTML5, Typescript, Javascript...etc.., Each one have some code standard.

     When we start building a web app front end maybe work one front end developer in the product . but, later many more developer will come and join to the team.

     In that time developer write him/her own style of the code and write a non-standard code. in this case later stage we have to face code maintainability, existing feature enhancement development delay and spend more time to fix the bug.

Real time problems:

  1. In single file with 1000 lines of code
  2. Same style code write in different pages (Instead of write a common component)
  3. Code in-consistency (One dev write outdated function and another dev write a advanced released function/methods)

Solution:

  1. Use framework recommended style-guide and enforce it.
  2. Refer other tech guru's following code style guide.
  3. Use eslint in git pre-commit hook(I will explain more about below here)

Example:

  1. Google
  2. Airbnb
  3. Vue 3

Theme customisation

via GIPHY

 Last couple of years every SASS product provide theme customization option. a user able to change their preferred theme like dark, light, green ...etc..,

 You may have doubt why i am talking this in web app architecture. it's look like small one.  Yes,  but it's more important in long term.

Real time problem:

   We build a product without considering the theme customisation. later stage we want to add it. it will be more complicate. because, the style/css files grown. we have to add theme customisation changes all of the style files. (It will be more like re-work overall the product)

Solution:

  1. When we setup a product add the theme customisation base also.
  2. Use variable for the each color code and serve all the files accessible.

Reference:

  1. Styled component
  2. CSS Custom properties
  3. CSS-Modules

Eslint and prettier

via GIPHY

  It's  must have to add it when you setup a web app. because, this one will help to maintain your javascript code standard problems and code formatting.

Eslint  helps to identify your JS code problem using as per the dev configuration. by default it will check eslint default eslint rules configuration. if we need, we able to customize our own rules using the .eslintrc.{js,yml,json} file.

Prettier helps to keep you product code clean and format. Main benifit is uniform the codebase and easier to read and modify. refer the below example:

Before without prettier

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {

  if(!greeting){return null};

     // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")

  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>

    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
    {greeting.endsWith(",") ? " " : <span style={{color: '\grey'}}>", "</span> }
    <em>
	{ greeted }
	</em>
    { (silent)
      ? "."
      : "!"}

    </div>;

}

After prettier

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver,
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .toString()
    .replace(/\.\d+/gi, "");

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(",") ? (
        " "
      ) : (
        <span style={{ color: "grey" }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? "." : "!"}
    </div>
  );
}

Reference:

  1. ESlint
  2. VS code

Bonus:

We able to check eslint problem when we are in working using VS code. so, if  we added it VScode. we don't need to check using command.

NOTE: Eslint and prettier set up in VS code and product is an added advantages. but, it must have in product.

Git pre-commit hook

via GIPHY

The pre-commit hooks is basically check custom scripts when a developer push a changes to branch. if the script not return any errors it allow to push the code. if have some error it will throw on terminal.

Real time problem:

   The developer able to push the code changes with eslint errors and un-formatted code. because, this all command line oriendent. may be a developer forgot to check these error.

Solution

Add the pre-commit hooks script in the project.

Reference

  1. Huskey
  2. Setup and pre-commit hook

Internationalisation

via GIPHY

Internalisation is about provide multiple language support like english, german, spanish..etc..,

Real time problem:

Build a app without considering a Internalisation support is more like re-work overall the product code template. because, when we plan to support Internalisation. The copy text will be completly different from the old one. Example:

Without translation support:

<p>Hello world</p>

With tranlation support:

<p>{{t "Hello world"}</p>

Solution:

By default setup the internalisation support with core language.

Reference

Base setup for all language

Thanks for reading this post. 😊

Part 3 will coming soon...