Front-End tools in terms of “-ilities” rules

may be this points not consider in small or intermediate projects but you must consider it in large and scalable projects if you seek professionalize in your carer.

Top 7 “-ilities” rules

  • Usability
  • Scalability
  • Extensibility
  • Maintainability
  • Security
  • Portability
  • Availability

Usability

How to achieve the usability?

  • Accessibility: Accessibility is a subset of usability and it’s about is your website components accessible.
  • Responsive: design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

Tools to consider:

Scalability

How to achieve the scalability?

  • DRY (don’t repeat yourself) doing repeated tasks over and over makes you feel frustrated and bored.
  • Make your workflow automated in case you forget something your workflow will do it for you.

Tools to consider:

npm , gulp and webpack is obviously the most popular and good tools

Extensibility

How to achieve the extensibility?

  • While Scalability is amount of work (inception) Extensibility on the other hand is amount of code (implementation).
  • Think about your app as a big problem breaking down a problem into two or more sub-problems of the same or related type, until these become simple enough to be solved directly.

Component-based architecture

Tools (Frameworks) to consider (with Component-based architecture concept):

Benefits from using this technique:

  • Reusability − Components are usually designed to be reused in different situations in different applications. However, some components may be designed for a specific task.
  • Replaceable − Components may be freely substituted with other similar components.
  • Extensibility − A component can be extended from existing components to provide new behavior.
  • Independent − Components are designed to be self content , Not context specific and have minimal dependencies on other components.

Maintainability (Readability , Changeability , Flexability or Testability)

Maintainability is a rule with sub-rules :)

How to achieve the maintainability?

  • Readability when it easy separation defects or their cause.
  • Changeability repair or replace faulty or worn-out components without having to replace still working parts.
  • Testability to prevent unexpected breakdowns.
  • Flexibility for meet new requirements or making future maintenance easier.

Tools to consider:

Security

How to achieve the security?

  • Add authentication to your system: secure API by using any kind of authentication.
  • Avoid XSS: a Cross-Site Scripting vulnerability happens when dynamic data is sent to a user without being validated for malicious content.
  • Avoid CORS: remember when CORS is used irresponsibly, it can allow anyone to send a request to your server.
  • Avoid IFrames: It’s important to remember that displaying content inside of an Iframe means you’re trusting that content.
  • Avoid Cookies: When working with cookies, it is important to remember that they can be vulnerable to XSS and CORS exploits. Their also not encrypted by default, which means a password stored in a cookie over http will be stored in plain text.

Tools to consider:

  • Using frameworks and services that have built in protection against these kinds of attacks , most of framework nowadays have built in security protection.
  • Validate user input to prevent XSS.
  • Set whitelist for websites you truest and ignore the others to prevent CORS security issue.

Portability

How to achieve the portability?

  • Testing: test if your system can work in different browsers under different system.

Tools to consider:

Availability (or Reliability)

How to achieve the availability?

  • Make the deploy process automated.
  • Make the maintenance schedule regular.
  • Make sure to integrate your workflow with deploy services to make it contusion integration.

Tools to consider:

Conclusion

consider using mention tools making development workflow more easier and flexible.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store