Good front-end architecture and architecture

Good front-end architecture and architecture
Front-end development whqet, csdn, Wang haiqing, whqet, front-end development expert

Translated from: www.sitepoint.com

Translated by: front-end whqet development. If this is not the case, you are welcome to correct it.

The translator said: most of the basic teaching content has been explained. Before large-scale project training, it would be very meaningful for students to understand and even follow some front-end coding specifications. Therefore, this blog is preparing to organize a series of articles on coding standards and best practices recently, including html, css, javascript, jquery, and php, hoping to help you, the project file architecture translated in this article.

------------------------------------------------------------

-- I participated in the blog Star Selection. If you like my blog, please vote. Your support is the source of my motivation. Let's get started!

Bytes -----------------------------------------------------------------------------------------

Result Preview

First, let's take a look at the final document architecture.

project  \css  \imgs  \js      \controllers          pageOne.js          pageTwo.js      \libs          angular.js          jquery.js          analytics.js      \plugins          jquery.tooltip.js          textResize.js          formValidation.js      \views          pageOne.js          pageTwo.js  \scss      \framework          _core.scss          _forms.scss          _input.scss          _mixins.scss          _variables.scss      \layouts          _all.scss          _phablets.scss          _tablets.scss          _desktop.scss          _desktop-large.scss          _retina.scss           \pageOne              _all.scss              _phablets.scss              _tablets.scss              _desktop.scss              _desktop-large.scss              _retina.scss           \pageTwo              _all.scss              _phablets.scss              _tablets.scss              _desktop.scss              _desktop-large.scss              _retina.scss      \libs          _animate.scss          _normalize.scss          _reset.scss      \plugins          _jquery.tooltip.scss          _jquery.fancyInput.scss

Introduction

We know that good coding conventions and best practices are very important, but what about the document architecture? Building a good document architecture is the foundation for starting a website or APP. How can we establish a document architecture with clear structures and ease of maintenance?

First of all, let's clarify the following issues:

1) A multi-page project (website or APP) is required)

2) projects must support multiple screen sizes. In other words, a responsive layout is required.

3) Easy Maintenance of final products

4) excellent final product performance

5) This template can be applied to future projects.

In the modern front-end development process, more and more tools are available to help us. For and, we need a CSS architecture that supports breakpoints to adapt to different devices. In addition, more and more CSS will make a mess (conflict with), so I chose a CSS Preprocessor to handle these tasks (I am using SASS Compass here ). For, the answer is very simple. Gruntjs is used. For, I think Yeoman is the best answer.

Organize Workflow

Each front-end will contain Class Libraries, jQuery plug-ins, and many JS and CSS files for various purposes. It is really necessary to effectively manage different technologies and different documents to run well in a centralized manner. Therefore, we need to follow the development model and Development conventions. The files are well organized to ensure that all documents are clearly structured and easy to manage.

We divide all the documents of the project into several major groups:

• SCSS files
• Scripts
• Views

Of course, we can continue grouping:

• SCSS
  • Variables
  • Mixins
  • Common parts to every layout
  • Single layouts
• Js
  • Libraries (such as jquery, angularjs, gAnalytics and so on ...)
  • Plugins (typically jquery plugins)
  • Controllers (I mean controllers such as angularjs controllers)

• Views
  • Common parts to every view
  • Single views

Then, we formed the Final Document architecture above.

Folder description

Imgs: contains all images in different formats.

Js: contains all js files, which can contain several subfolders.

Controllers: used to store "angular controllersnames with the same file name as the video (views.pdf. For example, home.html requires a controller. You should create a project \ js \ controllers \ home. js

Libs: Here put the class library (not plug-ins), such as jQuery-latest.js, angular. js, googleAnalytics. js, etc.

Plugins: plug-ins, such as jquery-fancyInput.js, restangular. js, customPlugins. js, etc.

Views: view. Each display file corresponds to a view. For example, if your home.html needs some effect, it is implemented in views/home. js.

Css: the css folder is generated synchronously from the SCSs folder. home.scss will generate home.css

Libs: CSS also separated the class library and plug-in, class library files such as _ meyers-reset.scss, _ normalize. scss, _ animate. scss, _ 960gridSystem. scss

Plugins: contains css files required for jQuery plug-ins to run, such as _ jquery-fancyInput.scss, _ jqueryTooltip. scss

Framework: I decided to put all cross-page scss files here, such as _ variables. scss, _ mixins. scss, and _ forms. scss.

Layouts: The response layout is implemented here, and the cross-screen solution is implemented following the "move first" principle. _ All. Files in scss are limited to all screens. If you need adaptability, you can rewrite them in other screen schemes. _ Phablets. scss (more than 481), _ tablets. scss (more than 768), _ desktop. scss (more than 1030), _ desktop-large.scss (more than 1204), _ retina. scss (@ 2x) all of these are called through media queries.

Conclusion

Finally, I used a Yeoman builder to build the project, and included some Grunt tasks for compression, troubleshooting, SASS compilation, and other functions. Go to github for details or download NPM.

This is not a standard front-end architecture solution. It may bring redundancy to your project and may not apply to your project. However, this is a good starting point and may inspire your own front-end architecture.

Thank you for your patience. If you have any help, please support me!

----------------------------------------------------------

Front-end development whqet, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------