V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
firhome
V2EX  ›  程序员

各位公司的前端开发环境是什么样的?能给点建议吗?

  •  
  •   firhome · 2014-05-19 15:09:52 +08:00 · 9375 次点击
    这是一个创建于 3851 天前的主题,其中的信息可能已经有所发展或是发生改变。
    先介绍下我们的:

    使用Git,每次新项目 或 变更 拉分支修改和phper配合更改

    因为网站架构的原因,我们前端做了一些结构脚本的变更,需要传到一个开发环境才能看到效果。

    这样很痛苦。。可以使用一些代理工具 让本地目录和线上目录对应起来,这样也很麻烦。

    本地也搭建不了环境,因为模板里有很多东西要调用后端代码输出

    所以想问问大家的开发环境是怎样规划的?
    38 条回复    2014-05-20 14:41:46 +08:00
    jinwyp
        1
    jinwyp  
       2014-05-19 15:34:11 +08:00   ❤️ 1
    本地把后端php 环境搭起来啊
    fanTasy
        2
    fanTasy  
       2014-05-19 15:44:46 +08:00   ❤️ 1
    为什么本地搭建不了环境。。。
    guchengf
        3
    guchengf  
       2014-05-19 15:45:17 +08:00   ❤️ 1
    为什么本地搭建不了环境?
    learnshare
        4
    learnshare  
       2014-05-19 16:04:26 +08:00   ❤️ 1
    首先,线上调试是错误的,本地必须要有完整的开发环境,甚至必须有类似线上环境的数据库数据。
    第二,没有本地不能搭建的环境吧...
    jerray
        5
    jerray  
       2014-05-19 16:30:48 +08:00   ❤️ 1
    应该是本地搭建环境特别麻烦吧?

    用过一种前后端分离的模式是后端只提供API接口。前端分两个部分:服务器部分(可以用php,也可以用node)调用后端的API然后把数据传给客户端,客户端部分负责界面显示和交互逻辑。

    这样一来前段的服务器部分只要能调用API就可以,搭建环境就变得很简单了。
    angelsoul
        6
    angelsoul  
       2014-05-19 16:42:06 +08:00   ❤️ 1
    前后端分离还是不错滴,我们现在就是这样
    jsonline
        7
    jsonline  
       2014-05-19 16:52:29 +08:00 via Android
    你不知道 Fiddler 么
    flynngao
        8
    flynngao  
       2014-05-19 16:53:52 +08:00   ❤️ 1
    静态……
    jsonline
        9
    jsonline  
       2014-05-19 16:54:20 +08:00 via Android   ❤️ 1
    如果你们的前后端语言是混在一起,就当我没说。
    allenm
        10
    allenm  
       2014-05-19 17:02:37 +08:00   ❤️ 1
    1, 把 js, css 想办法指向到本地 ( 改 hosts , 使用代理服务器 等方案都可以)
    2, 后端环境不好在本地搭建的话,让后端把开发环境搭建在一个开发服务器上,然后本地 IDE 通过插件或者其他方式实现本地的代码和开发服务器同步(自动或者有快捷键),可通过 SCP, FTP 等方案来实现。
    3, 如果开发的是移动应用,来试试我写的这个工具 xdns(https://github.com/allenm/xdns) 来实现第一步的目标。
    firhome
        11
    firhome  
    OP
       2014-05-19 17:27:54 +08:00
    @jinwyp
    @fanTasy
    @guchengf
    @learnshare
    @jerray
    @angelsoul
    @jsonline
    @flynngao
    @allenm

    感谢各位的回复,我是新来公司,暂时还没搞清楚为什么不行。我再详细说一下吧。

    我自己尝试着用fiddle指到本地,也尝试过修改hosts等等。。。但是终究还是不方便阿。。。

    现在我看到的情况是这样。

    我们和后端用同个git分支,新建项目他们会新建个html页面,里面有一些php的调用,如结构,css,js的引用(都是靠php得模块来引用)。

    然后我们在这个html上面进行开发。基本上如果要看效果都要上传到开发环境来看。

    等我们html结构写好以后,php就会在html代码里加php代码,比如循环输出列表阿,图片阿 内容等等。。。

    所以导致我们要看效果必须在开发环境。

    我也问过是否能搭建本地环境,他们回答貌似是挺难的。。。
    jsonline
        12
    jsonline  
       2014-05-19 17:40:48 +08:00 via Android
    @firhome 你唯一的出路就是搭建本地环境了。 或者继续蛋疼地上传到服务器再看效果。
    难在哪里?
    firhome
        13
    firhome  
    OP
       2014-05-19 17:44:38 +08:00
    @jsonline 这个等我确定下再跟大家讨论吧。。其实更想知道大家的流程是什么样的
    2688
        14
    2688  
       2014-05-19 18:03:19 +08:00
    chrome /firefox 开发者工具,直接在页面上改js和css ,难道每次都大改?
    ganxiyun
        15
    ganxiyun  
       2014-05-19 18:10:35 +08:00
    同意要搭建本地环境

    个人一点想法,如果搭建本地环境特别麻烦,而在html中的php代码比较少,可以考虑:
    1. 只搭建一个本地php环境
    2. 所有有php代码的地方,都写一个mock的,只依赖于php库本身的。类似于写单元测试吧
    hustlzp
        16
    hustlzp  
       2014-05-19 18:14:35 +08:00
    可以尝试让后端使用vagrant+puppet搭建统一开发环境。
    jsonline
        17
    jsonline  
       2014-05-19 18:26:09 +08:00 via Android
    @firhome 我这里的流程是后台只输出 JSON
    chemzqm
        18
    chemzqm  
       2014-05-19 19:13:30 +08:00
    建议就是前端负责路由,渲染,后端只给JSON数据,开发时前端mock数据,就是对前端代码组织要求高了点。
    bsbgong
        19
    bsbgong  
       2014-05-19 19:17:08 +08:00 via iPhone
    数据库操作全部rest,不管你用php还是Java还是其他
    后端路由和一般的逻辑,express解决
    前段你可以选择使用类似backbone的框架
    调试非常方便
    团队分为api team,design team,website team
    lenzhang
        20
    lenzhang  
       2014-05-19 19:24:30 +08:00
    看来真的很多人不用Fiddler的。你们一定过得很痛苦吧。
    tonghuashuai
        21
    tonghuashuai  
       2014-05-19 19:41:58 +08:00
    我们一套线上,一条开发环境,只有线上线下的分离,没有前端和后端的分离
    DeeCheung
        22
    DeeCheung  
       2014-05-19 19:51:01 +08:00 via Android
    这种情况就应该上 docker
    NemoAlex
        23
    NemoAlex  
       2014-05-19 20:15:02 +08:00
    @lenzhang 不在本地搭环境,只用 Fiddler 调静态文件,不能改后端代码,这样的开发者才痛苦吧
    lenzhang
        24
    lenzhang  
       2014-05-19 21:08:42 +08:00
    @NemoAlex 各司其职,分工明确,前端只干前端的事情,轻松许多。如果你可以改后端代码意味着你要多负责一块工作。同时干扰也更多。后端有问题了,要求后端把cgi或者其他接口调好就行了,干嘛自己改呢。
    learnshare
        25
    learnshare  
       2014-05-19 21:12:56 +08:00
    虽然 REST API + 前端渲染模板的方式很好,但对于已有的项目,这种方式几乎是重写,就不建议了...

    按道理说,应该两个人共用一套测试环境(比如独立的测试机/虚拟机),这样比较适合前后端混合的开发方式。

    话说 PHP 的开发环境不是很难搞吧,如果后端不愿意帮你搞起来,就自己搞。
    lisposter
        26
    lisposter  
       2014-05-19 21:34:31 +08:00
    还是辛苦搭一下吧,磨刀不误砍柴功劳,想当年我一个环境搭了一天。。。
    maga
        27
    maga  
       2014-05-19 22:59:50 +08:00
    @lenzhang fiddle除了了看http请求,还能干嘛呢
    icloudnet
        28
    icloudnet  
       2014-05-19 23:19:19 +08:00
    半小时就能搭建个本地环境
    譬如:
    vmware装个centos or ubuntu 桌面版
    修改/etc/hosts
    加入
    example.com localhost

    restart apache2 or httpd

    然后在机器里想怎么改就怎么改了
    yun77op
        29
    yun77op  
       2014-05-19 23:25:56 +08:00
    我们使用的是freemarker模板

    改bug或维护任务时,是直接跑起整个环境的,使用maven-tomcat-plugin,都不用打开eclipse了,还蛮方便的。

    开发新功能的话,后台都没准备好,没法跑整个环境的,就必须用到模拟服务器工具了,直接写freemarker模板,然后模拟服务器工具可以把模板跟伪数据结合转成html
    yun77op
        30
    yun77op  
       2014-05-19 23:27:47 +08:00
    @maga 可以重定向http吧
    hustlzp
        31
    hustlzp  
       2014-05-19 23:29:36 +08:00   ❤️ 1
    hkongm
        32
    hkongm  
       2014-05-20 08:51:31 +08:00
    写个watch,文件保存后立即scp到测试环境。
    shiye515
        33
    shiye515  
       2014-05-20 10:19:00 +08:00 via Android
    fis
    VienDave
        34
    VienDave  
       2014-05-20 11:07:08 +08:00
    @fanTasy 发现射射一枚!
    Aben
        35
    Aben  
       2014-05-20 11:15:36 +08:00
    nginx 代理。
    fiture
        36
    fiture  
       2014-05-20 12:33:04 +08:00
    @lenzhang Nginx也可以代理。
    fanTasy
        37
    fanTasy  
       2014-05-20 13:11:08 +08:00
    lenzhang
        38
    lenzhang  
       2014-05-20 14:41:46 +08:00
    @fiture 是的,不过fiddler功能更加齐全而已。自己根据需要写 fiddler script,可以有效地提高开发效率。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3170 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:03 · PVG 22:03 · LAX 06:03 · JFK 09:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.