DWQA QuestionsCategory: ProgramHow to hold the front-end development of the whole website?
Hanruis asked 2 months ago


  • At present, I work in an e-commerce platform company in the process of starting a business, and the website is not online. I am the only one in the front end, and the page to be written is about 50 +.
  • The manager in charge of the project did not know the front end very well, and did not give some technical selection or reference direction.
  • There is no UI for the project, so I will cut the diagram according to the document given by the product manager. The document description is very simple and gives a sketch of the page.
  • Finally, (ノддノдд ‘) everyone thinks that the front end is not difficult, it is just a page writer.

Front end situation:

  • There is no specification。 When taking over the work, HTML tags were abused seriously, and the page compatibility was poor (some of them were obviously not available under IE7). Two CSS files were responsible for almost all page styles. JS adds a lot of plug-ins.
  • There is no good development idea。 There are no generic components at this time, No common.css , no documents, no comments. I don’t know if the word is right: there is no good architecture and planning.

My own solution:

  • Refactor as many pages as possible: improve reuse. The requirements given by the product manager usually give several pages. When you finish doing another requirement, you often find that there are many places that can be used universally. (┬_┬)
  • DocumentWhen I took over the job, there were no documents and no comments on the files.
  • Write the basic UI Library:It includes buttons, pop ups, city selectors, form styles, and so on. Although you are not the UI, you should do it well first and then adjust it later. (this one was made by myself. The manager didn’t ask for it.)

The problem is:

  • I always feel that there are no plans and regulations.All of the above I should do by feeling. Although it has done so, there are still many problems that I have not thought of, and the original problems have not been completely solved. sinceI have no confidence in myself, and I am at a loss. What will happen after all.
  • So I would like to consult you
    • In such a situation, how should I position myself?
    • In this development process, what should I do to make the front-end part less pitted?

Thank you for your encouragement and suggestions. ヾ(@^∇^@)ノ
Today, I found a friend to talk about my confusion. With the analysis given by everyone, I have some ideas.
thank@mcfog(reliable output, sinking into CGI Development)
thank@NMTuan(your suggestions on file organization and JS modular loading)
thank@Fwolf(0 starts to build frameworks, standards, etc. when the company’s progress permits)
Thank you all. Orz!

cgcgbcbc replied 2 months ago

There’s another “new” thing called yoeman

cgcgbcbc replied 2 months ago

To be able to analyze these things, the third and fourth word of the title can be removed

cgcgbcbc replied 2 months ago

Give the question typesetting a compliment.

14 Answers
civerzhu answered 2 months ago

To do such a project, there are places of distress and joy. The trouble is that there is no previous guidance, no ready-made specifications, or even reliable UI and knowledgeable PM. Many things need to be designed and explored by ourselves, which will take a lot of time, and no one will tell you whether it is well done or what needs to be improved. Joy lies in starting from scratch, following your own ideas, no constraints, more opportunities for independent thinking and more experience.
If you think the team has a bright future, this project can experience you, this is an opportunity for self-improvement, then relax and do it;
If you think you need someone to lead your growth, and you think this project will only be thankless, don’t do it;
How to plan specifically:
1. The above answers are all very good. They all said that we can save a lot of time and learn from other people’s practices by making full use of the existing excellent and widely recognized basic framework, such as bootstrap;
2. Step by step, at the beginning, do not design too detailed, easy transition design, first from the most basic file directory structure, HTML framework structure, CSS hierarchical concept, JS framework design. Design from big to small. But the implementation process is just the opposite, starting from a small, the most basic components, to the whole page, and then copy to more than 50 pages.
3. Although it is their own free planning of the entire front-end design. But you don’t know if your design is good or not. You don’t know how to improve it. Therefore, in the final analysis, it is still necessary to have a person who knows how to give you advice. If your colleagues and superiors are not in front of you, you can ask your friends or go online.
4. When you don’t know how to start, learn to imitate the existing e-commerce website or open source code, and read their design, so that you can know what your design lacks. Of course, it’s better to accumulate it when you study at ordinary times.
5. Finally, talk about it and do it with the attitude of learning.

Fwolf answered 2 months ago

You’re happy without discussing personal career planning.
How to say that? You are completely in charge. The development mode and standard are all decided by you. No one gives you any rules and regulations. This is a kind of freedom.
So, carefully referring to the above answers, they said very well,If the progress of the company allows
Start with 0, build frameworks, standards, etc., and refactor the project a little bit,
This is a kind of exercise. You may not have the experience of this kind of architecture design in a mature company.
Of course, the architecture design should not be too individual. The existing models have their own advantages and disadvantages,
There are reasons and origins for their development,
You can see the difference between what you plan and what you design according to a mature framework,
From the experience, improve their own planning ability, of course, also have code control ability.
Finally, close to the standard, properly retain their own personality, grow as soon as possible, and then plan their own career development path.

javcof answered 2 months ago

Working alone is very slow for front-end ability improvement. For most people (except genius), it’s better to find a reliable front-end team to make faster progress.

JerryZou answered 2 months ago

A little bit of growth, since there are so many people in the company who don’t understand the front end. Try to restructure the whole company as part of your long-term plan. In the evening, I went home to have a look at the complete code and the hackers and painters. By the way, they supplement various front-end knowledge.
The company can’t offer you anything. The advantage is that it’s a good exercise opportunity, but the problem is that people around you won’t understand your hard work. So if you don’t do well enough, you don’t have to criticize yourself. Just try your best. Sometimes the code is so ugly that I can’t stand it. After all, no one can write perfect code in the first place, and it is inevitable that the boss has been urging him.
After the company grows up, you can change jobs. There are many small companies that don’t understand the front end. There is no need to swallow one’s anger in this family. Happiness is the most important thing for people to live. It is a kind of happiness to be affirmed by others.

21sta replied 2 months ago


JerryZou replied 2 months ago


mcfog answered 2 months ago

I think the current situation analysis and solutions are reliable. I think your confusion is mainly due to the surrounding disapproval. You have no experience and other colleagues don’t understand. In fact, it’s strange to identify with and support you. Keep reliable output, find hidden dangers in advance, point out problems, and gradually get due praise.
As for the technical aspect, my suggestion is: sink into CGI development, even if you don’t actually participate in CGI development, you should do a good job with CGI Development & read CGI code thoroughly (well, the emphasis is certainly on rendering output). Without the support of CGI, the pure front-end can achieve half the result with twice the effort if it wants to reuse and structure

NMTuan answered 2 months ago

By intuition. Just a little bit
First of all. Single front-end development. Do not need too many standards to implement. In line with their own habits. Write clear comments for each part. Even if it is redundant
In the case of no design draft and only wireframe, you can find a set of UI to use or extract some styles
This needs to be based on the actual project.. for e-commerce. Possible

  • Front page / list / details. Three page styles put together
  • Shopping cart. Order process related page styles are put together
  • Put the related patterns of the membership center together
  • Help / news and other page styles can be independent

Then JS script. You can try requirejs / seajs. But it feels as independent as style. You can refer to it separately
Finally. At any time precipitation project experience. It is best to document. For the company. More for themselves

Tai Yu replied 2 months ago

I’m also a front-end user. I recommend a front-end UI to the respondent, which is based on bootstrap,http://zui.sexyIt’s called Zui. The document is well done. If you can use bootstrap, it will be faster. I am responsible for the official website I developed with it from design to online.

fishenal answered 2 months ago

It’s good to develop by one person. The standard is decided by ourselves.
Complex interaction augular.js If it’s not complicated, you can consider bootstrap. It’s best to use js MVC framework to do it, with 50 pages in a flash

Artwalk answered 2 months ago

Have an idea, the best
Look at this process of reflection and believe that you will find your answer after a period of time
The following is just a reference, not clear can be discussed ha

  • Positioning: read more books + Daniel’s blog, see their technology and psychological process
  • It seems that the front end part will be so pit in any way
macctown answered 2 months ago

With the front-end framework, on the one hand, it provides CSS, components, JS controls… You can use it directly to reduce the time it takes,http://www.bootcss.com/

52lidan answered 2 months ago

I personally do not provide specific suggestions.
I have had a similar experience, the front-end of these norms, or need to think more, more practice.
So it’s good to do something and stop and think.

Refraction answered 2 months ago

If there is no general library, it should be very good to use some classic less or bootstrap. As for JS, if you don’t have time to write a set, you can directly borrow open source (I believe you will Baidu). The past In fact, if you can use it, you can put it to finish other work before refactoring. After all, refactoring is an arduous but not too flattering task.

Front end designer M4 answered 2 months ago

You have a very, very happy working environment that all front-end engineers can’t dream of.
If possible, it is recommended to refactor all the front ends.
Recently, I’ve been looking at bootstrap again and learning its architecture. I’m very big.

Ivan 様 answered 2 months ago

Just Do It ~

steamed stuffed bun answered 2 months ago

Leave immediately.