admin管理员组文章数量:1418112
I have a very large website that I need to refactor the front-end of due to maintainability concerns and performance issues:
What's tricky:
- Lots of overplicated scripts
- Over-plicated CSS with a whopping filesize
- No selenium tests in place
- No js tests in place
- Back end developers concerned anything breaking
- The site has been live for a while and the client is happy
Tools available:
- Multiple servers for testing versions on
- Continuos integration setup
- Version control
I have a very large website that I need to refactor the front-end of due to maintainability concerns and performance issues:
What's tricky:
- Lots of overplicated scripts
- Over-plicated CSS with a whopping filesize
- No selenium tests in place
- No js tests in place
- Back end developers concerned anything breaking
- The site has been live for a while and the client is happy
Tools available:
- Multiple servers for testing versions on
- Continuos integration setup
- Version control
- 6 you need to refactor it? but the client is happy... these two statements seem to be at odds. – Fosco Commented Aug 11, 2010 at 13:23
- 3 Unless you can convince the client it needs done, how are you going to explain to them when the inevitable new bugs that are introduced into the system appear? Most likely the client will be annoyed it wasn't done properly in the first place. Sounds like a no win situation. +1 Fosco – starskythehutch Commented Aug 11, 2010 at 13:35
- @starskythehutch This concerns me +1 to you both – Dr. Frankenstein Commented Aug 11, 2010 at 13:43
- thing is, my boss is white-labelling the site and wants to keep the fornt-end nearly the same, I am likely to be working on this for the next few years should I stay – Dr. Frankenstein Commented Aug 11, 2010 at 13:51
- So your boss is wanting to modify the application and not tell the client? That's gross misconduct where I e from! – starskythehutch Commented Aug 11, 2010 at 14:40
4 Answers
Reset to default 5Some thoughts (after having done also bigger refactorings though more on backend side):
- create a play-branch where you start to "scribble" refactor. there you can see how the refactoring feels. I often find that especially big refactorings are like starting design/programming. You have to get hands on and see how your refactoring target feels like. This also has great to better estimate the overall effort.
- as your client is happy and it is more an investment for future take the incremental approach. Do not do a big-bang refactoring. Try to partition several refactoring areas (e.g. javascript vs. CSS) and also by pages.
- start with the easier refactorings steps. They help to get you "fit" with the harder ones.
- the scm is one of your biggest friends. It is vital to revert quickly and feel safe when refactoring. Even on your refactoring branch for bigger works you can create further "minor-branches" to go on with bigger refactoring steps.
- regression tests are vital. Get tests in place first. 100% test automation is hardly possible, so get one of your QA/Test team-members to help you along the refactoring and regression-test after each bigger refactoring-step. The 'it doesn't work anymore' after 3 months of refactoring would just smash you.
- for more difficult refactorings (hard to test) and flaky code structure do 'pair programming'.
- The fear backend developers not trusting big refactoring is correct, take them serious and ask for help (especially for the regression testing requirements).
Well, it seems to me that the main problem you're facing is a lack of exiting JavaScript/Selenium tests. Once you've got those in place, you can start the real work of refactoring, taking small steps - confident that mistakes will be picked up.
Never refactor without having tests in place first.
Well I would start out copying the project to a new workspace and creating a place for your version control. This way your back end developers don't need to be scared anymore. Next I would look at the css files because you can change those and see the difference right away. When you like the css you have then you can go on to the script part.
Here you definitely need tests because else there will certainly be some errors or changes which are not wanted. I personaly would migrate the script in very(!) small junks so you are able to find errors very fast and run tests for every little thing you changed. This will lead to the most persistent oute in my experience.
Another thing you need to think of is the deployment. I mean there are always some requirements or dependencies (I don't know if that's the case in your problem but you should really check that and work with your back end guys so they can give you some hints where the problems could be).
Here are some ideas:
- Spend a few hours going over the site, clicking through, getting a sense of functionality
- Zero into the core page, or pages you want to focus your main improvements on. Spend an hour on that
- Start looking at what's more important: A) maintainability / quick ability for you or someone else to e in and extend functionality B) page load performance - how you might reduced it by 100kb plus, and consider if its really worth it based on the type of site it is C) ui latency. How sticky, intermittent transitions, how slow the site feels once loaded.
Come up with a figure in your head. Is it a two day job for you? 2 weeks? What benefit will it have for all of the above? Now consider how long it might take some new developer you have hired who will now have to go through the same process as you and be at your level.
Once you feel you know all the possible user journeys and variations of a particular ponent you have singled out, consider how long it would take you to do the following:
- recreating the same file hierarchy of a single page onto your own server, outside of the existing slow/unreliable/changing environment/live site or whatever so you can accelerate the speed in which you are about to work on this (approx 3/4 day)
- switching headspace between development/research/documenting anything as you go/ interruptions, managing other projects etc (approx 1hr)
- create whatever tests you want and develop from scratch and emulating an existing piece of fe architecture, written exactly how you would have wanted it. (1 day per ponent - html, accessibility, sass, js etc)
- consider how you could integrate this single ponent into the existing architecture/environment and remove the existing piece without breaking anything around it.
- integrate it back into the environment. Time is money, but thorough investigation before embarking on a project will protect and prepare you for that important discussion with the business owner.
本文标签： javascriptHow do you go about refactoring the frontend of a large websiteStack Overflow
版权声明：本文标题：javascript - How do you go about refactoring the front-end of a large website? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745281087a2651427.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论