前端菜鸟如何hold住整个网站的前端开发?

背景情况:

  • 目前在创业中的电商平台公司工作,网站未上线。前端只有我一个,要写的页面大概有50+。
  • 负责项目的经理不是很了解前端,没有给出一些技术选型或者参考方向。
  • 项目没有UI,我要按照产品经理给出的文档来切图。文档描述很简单,会给出页面草图。
  • 最后,(ノ´д`)大家都觉得前端不难,就是个写页面的。

前端情况:

  • 没有规范。接手工作的时候,html标签乱用的情况比较严重,页面兼容效果也差(部分在ie7下明显不可用),两个css文件几乎负责所有页面的样式。js加入了很多插件。
  • 没有很好的开发思路。目前没有通用组件,没有common.css,没有文档,文件没有注释。不知道这个词形容得对不对:没有很好的架构和规划。

自己的决解:

  • 尽可能重构一些页面:提高复用。产品经理给出的需求一般给出几个页面。当做完再做另外一个需求的时候,时常发现有很多地方是可以通用的。(┬_┬)
  • 编写文档:接手工作的时候,没有任何文档,文件也没有注释。
  • 编写基础的UI库:包括按钮,弹出框,城市选择器,表单样式等等这些。虽然自己不是UI,但是先做好,后面调整就好。(这个是自己做的,经理没要求。)

问题是:

  • 总觉得没有一些规划,规范。上面那些我都是凭着感觉,应该这样做去做的。虽然是做了,但是还有很多问题,自己觉得还没有想到,而且原有的问题也没有说已经完全解决。自己心里面很没有底气,也有些茫然。到底后面会要怎么样。
  • 所以想请教各位前辈

    • 在这样的情况,我该如何定位自己?
    • 在这个开发过程中,我应该怎么做会让前端部分不那么坑?

谢谢大家给我的鼓励和建议。ヾ(@^∇^@)ノ
今天找了也找朋友聊了自己的困惑。加上大家给的分析,慢慢有点思路了。

感谢 @mcfog , (靠谱输出,下沉到CGI开发中)
感谢 @NMTuan (你的给出文件组织和js模块化加载的建议)
感谢 @Fwolf , .. (在公司进度允许的情况下,0 开始构建框架、标准等)

感谢各位前辈们.orz!

阅读 18.8k
20 个回答

做这样的项目,有苦恼的地方也有欢喜的地方。苦恼在于没有前人的指导、没有现成的规范,甚至没有靠谱的UI和懂行的PM,很多东西需要自己设计和摸索,耗费的时间会不少而且没人会告诉你做得好不好和需要改进的地方。欢喜在于一切从零开始,按照自己的想法走,没有任何约束,更多的独立思考机会和更多的历练。
如果你觉得这个团队有前途,这个项目能历练你,这是一个自我提升的机会,那就放松心态去做;
如果你觉得自己需要有人带领着成长,觉得这个项目只会吃力不讨好,那就别做了;

具体怎么规划的话:
1、上面的回答都很好,都说到了尽量利用现成优秀经过大众认可的基础框架,如bootstrap之类的,可以节约大量时间,同时学习别人的做法;
2、一步又一步来,一开始别设计得太细,容易过渡设计,先从最基本的文件目录结构、HTML框架结构、CSS分层概念、js框架设计。从大到小地设计。而实现过程刚好相反,要从小开始,最基本的基础组件,到整个页面,再复制到50多个页面。
3、虽说是自己自由规划整个前端的设计。但你不知道自己设计得好不好,不知道改进方法。所以说到底还是尽量需要有个懂得的人给你建议,同事和上司都不会前端的话可以找朋友或者上网询问。
4、当你不知道怎样开头的时候,学会模仿,现有电商的网站或者开源的代码,读懂他们的设计,这样你就知道自己的设计缺什么了。当然这个最好是在平时学习时积累起来。
5、最后说说,抱着学习的心态去做。

在不涉及讨论个人职业规划的前提下,你很幸福。

怎么讲呢?你自己完全做主啊,开发模式,标准全由你自己定,没人给你画条条框框,这是一种自由。

所以呢,仔细参考上面的答案,他们说得都很好,在公司进度允许的情况下
从 0 开始构建框架、标准等等,一点点把项目重构起来,
这是一种锻炼,你到成熟公司里不一定能有这种架构设计的体验。

当然,架构设计上不要太有个性,现有的各种模式各有优缺点,
他们发展成这样都是有原因、有渊源的,
你可以体会一下自己规划的、和按成熟框架设计的有什么区别,
从中体会,提高自己的规划能力,当然也有代码掌控能力。

最后的最后,向标准靠拢,适当保留自己的个性,尽快成长,然后规划自己的职业发展道路。

@Hanruis
单干对于前端能力的提升很慢,对于大多数人(天才除外)来说,还是找个靠谱点的前端团队,进步更快。

一点点成长,既然公司里这么多不懂前端的人。你在这家公司也不是长久之计,就把这个项目作为你成长的一部分吧,试着去重构,去完善整个框架。晚上回家看看《代码大全》、《黑客与画家》这种书陶冶一下情操。顺便恶补各种前端的知识。

公司啥都没法提供给你,好处是这是个不错的锻炼机会;但面临的问题是周围的人都不会理解你的辛苦。所以你做的不够好也不用苛责自己,尽力就行了。有时候代码写的丑陋一点,甚至自己都无法忍受也没办法。毕竟没人一开始就能写出很完美的代码,老板又一直催催催,在所难免。

在这个公司成长起来后就跳槽吧,对前端不理解的小公司多得是。没必要在这家忍气吞声,人活着最重要是快乐。自己的价值被他人肯定也算是一种快乐吧。

我觉得现状分析和解决思路都已经比较靠谱了,我觉得你的茫然主要还是出于周围的不认同,你没有经验,其他同事不了解,其实认同支持你反而奇怪了。保持靠谱的输出,提前发现隐患指出问题,慢慢会得到应有的好评的。

至于技术方面,我的建议是:下沉到CGI开发中去,即使不实际参与CGI开发,也要做到和CGI开发搞好关系&通读CGI的代码(嗯,重点当然是渲染输出方面)。没有CGI的支持,纯前端想复用想结构化很多时候是事倍功半的

凭直觉.说一点点吧.

首先.单人前端开发.不需要太多的标准去执行.符合自己习惯.写清楚每部分的注释.哪怕是多余的注释.
在没有设计稿.只有线框图的情况下.可以找一套ui拿来用或者提取部分样式.
样式文件合并的问题.这个需要根据实际项目来..对于电商.可能

  • 首页/列表/详情.三页样式放在一起.
  • 购物车.下单流程相关页面样式放在一起
  • 会员中心相关样式放在一起
  • 帮助/新闻等其它页面的样式各自独立即可.

然后是js脚本.可以试一下requirejs/seajs这类.但感觉像样式一样独立开来.分别引用就可以了.

最后.随时沉淀项目中的经验.最好整理成文档.为公司.更为自己.

一个人开发才好呢,规范啥都自己定。
交互复杂的话用augular.js, 不复杂的话可以考虑bootstrap,最好利用js MVC框架去做,50个页面弹指一挥间

有想法,最好
看这个反思过程,相信一段时间后你就会找到自己的答案

下面说的只是参考,不清楚的可以讨论哈

  • 定位:多看书+大牛的 Blog,看看他们的技术以及心理历程
  • 前端部分好像怎么做都会那么坑(道听途说的,这样的话,从做个不坑的人开始)
新手上路,请多包涵

用前端框架,一方面他提供了css,组件,js控件。。。你可以直接用,减少耗费的时间~比如:Bootstrap,http://www.bootcss.com/

我个人不提供具体建议。
我也有过曾经类似的经历,前端的这些规范,还是需要自己多思考,多实践的。
所以,做一些,停下来思考,还是很好的。

没有通用库的情况先去用一些经典的less或者bootstrap本家等等应该都是很不错的,至于js问题,如果没有时间去编写一套的话 直接去借用开源(我相信你会百度的)就好。过去的那些……其实如果可以用可以先放着 完成其他工作再去重构,毕竟重构这个属于费力但是又不太讨好的工作。

你有一个非常非常非常幸福的工作环境,这是所有前端工程师梦想不到的。
如果条件允许,建议对所有前端进行重构。
最近一段时间,一直在重头看bootstrap,学习它的架构,企发很大。

Just Do It ~

赶紧离职。

和题主差不多的情况,团队里唯一的前端。

看书看博客,一个页面一个页面写下来,进步很快。

但这样久了,觉得好孤单啊。

于是要离职了。

想得到更多的支撑

walk with the master,想riding with the king

再后来也许能有一天,还会回到这样的环境中。

说完了。没有在答题。折叠我吧~

新手上路,请多包涵

不想说很多,心态很重要,跟对人做对事,新人就是这样成长起来的。。。

果断Bootstrap 杠杠滴啊,, 注释方面 其实很多时候 赶项目 加班 时间不够 很多地方 难以加上的, 我都是不忙的时候才加,都加班到晚上10点了,哪有那么多空写文档,搞注释啊.

坦白说一个人做的话压力很大,最关键的是有什么问题还没人可以讨论。

要讨论网站的通用模块,比如导航、页尾等等;
通用样式,一些逻辑的复用,登陆、评论什么的,比较复杂;
后端接口的联调,什么的都很麻烦。

东西太多,只能想到这么多。

如果可以一个人做完,那么成长是显而易见的。最后,成长完了就走吧,你这公司也太不靠谱了。

推荐问题
宣传栏