Good front-end architecture

Front-end development whqet,csdn, Wang Haiqing, Whqet, front-end development experts

translated from:www.sitepoint.com

Translator: Front-end development Whqet, free translation mainly, improper place welcome everyone to correct.

The translator said: Near the end of the semester, most of the basic teaching content has been explained, before the large-scale project training, it would be very meaningful to let students know and even follow some of the coding specifications developed at the front. Therefore, this blog is ready for a recent series of coding specifications and best practices, including HTML, CSS, JavaScript, jquery, PHP, and so on, I hope to be helpful to you, this article translation of the project file structure.

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

--I participated in the blog star selection, if you like my blog, to vote, your support is my source of power, go!

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

Results Preview

Let's start by looking at the final Document schema, and then we'll make a brief translation.

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-l Arge.scss _retina.scss \pagetwo _all.scss _phablets.scss _ta Blets.scss _desktop.scss _desktop-large.scss _retina.scss \libs _anim Ate.scss _normaLize.scss _reset.scss \plugins _jquery.tooltip.scss _jquery.fancyinput.scss 

Introduction

We know that good coding conventions and best practices are important, but what about document schemas? Building a good document architecture is the basis for starting a website or app, how do we build a clearly structured, maintainable document architecture?

First clarify a few questions, our goal:

1) need a multi-page project (website or app)

2) requires the project to support multi-screen size, in other words, the need for responsive layout

3) The final product is easy to maintain

4) Good final product performance

5) Future projects can apply this template

In the modern front-end development process, there are more and more tools to help us. For the 1th and 2nd, we need a CSS schema that supports breakpoints in order to adapt to different devices. More and more CSS is going to make a mess (with the 3rd clash), so I chose a CSS preprocessor to take care of these things (I use Sass's compass here). gruntjs for 5th, I think yeoman is the best answer.

Organizational Workflow

Each front end will contain the class library, jquery plug-ins and a lot of various purposes of JS, CSS files, effective management of different technologies, different documents set up to run well really need a good workflow. Therefore, we need to follow the development model, the development of the contract, the file is well organized to keep all the document structure clear, easy to manage.

We divide all the documents of the project into several large groupings:

• SCSS files
• Scripts
• Views

Of course, we can also continue to group:

• SCSS
  • Variables
  • Mixins
  • Common parts to every layout
  • Single layouts
• libraries (such as jquery, Angularjs, Ganalytics and so on ...)
• controllers (I mean Controllers such as ANGULARJS controllers)

• Views
  • Common parts to every view
  • Single views

Then, we formed the final Document schema above.

Folder interpretation

IMGs: Put all the pictures, pictures in different formats.

JS: Put all the JS files inside, can include several subfolders.

controllers: For storing "angular controllers", having the same file name as the view (views), for example home.html requires a controller, you should build a project\js\ Controllers\home.js

Libs: Place class libraries (not plugins), such as Jquery-latest.js, Angular.js, googleanalytics.js, etc.

Plugins: plugins, such as Jquery-fancyinput.js, Restangular.js, customplugins.js, etc.

Views: view, each display file corresponding to a view, such as your home.html need some effect, in views/home.js implementation.

The Css:css folder is generated synchronously from the Scss folder, and Home.scss generates HOME.CSS

LIBS:CSS also separates the class library from the plug-in, class library files such as _MEYERS-RESET.SCSS, _normalize.scss,_animate.scss, _960gridsystem.scss

Plugins: Contains CSS files that the jquery plugin must run, such as _JQUERY-FANCYINPUT.SCSS, _JQUERYTOOLTIP.SCSS

Framework: I decided to put all the cross-page scss files here, such as _variables.scss, _MIXINS.SCSS, _FORMS.SCSS, etc.

Layouts: Implement responsive layouts here, and follow the "move first" principle to implement cross-screen solutions. The files in _all.scss are limited to all screens, and we can rewrite it in other screen scenarios if we need adaptability. _PHABLETS.SCSS (over 481), _tablets.scss (over 768), _desktop.scss (above 1030), _DESKTOP-LARGE.SCSS (more than 1204), _retina.scss (@2x) All of these are called through the media query.

Conclusion

Finally, I use a yeoman generator to build the project, including some grunt tasks to achieve compression, troubleshooting, sass compilation and other functions. To GitHub or NPM downloads.

This is not a standard front-end architecture scenario, may give your project redundancy, may not be applicable to your project, but this is a good starting point, hoping to bring inspiration to our own front-end architecture.

Thank you for your patience to read, if you have help, please support me !

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

Front-end development Whqet, focus on web front-end development, share related resources, welcome to praise, welcome to shoot bricks.
---------------------------------------------------------------------------------------------------------

Good front-end architecture