如何分离客户端Web UI和服务器端的开发
我正在为 C/S 企业应用程序提供 Web UI 作为当前桌面 UI 的替代方案。
在我们的桌面版本中开发客户端时，UI 开发人员可以连接到任何服务器，因此他们只需要客户端环境。
在开发 Web UI（浏览器中的客户端 JavaScript）时，我们受到浏览器的“同源策略”的约束，因此 UI 必须与下载 UI 代码的同一服务器进行通信。
到目前为止，就我所知，UI人员的开发场景是：
- 开发人员在本地安装服务器 机并运行它。
- 开发人员在本地安装时编辑 HTML+JS+CSS 文件。
- 每次需要根据新的服务器行为测试 UI 代码时，开发人员都必须在本地计算机上重新安装/更新服务器。
这看起来不太舒服，至少与我们之前的C/S风格开发相比。
您是否可以建议使用其他方法来不需要 UI 开发人员在其开发计算机上安装和更新服务器端组件？ 或者还有其他可以简化开发过程的相关内容吗？
谢谢:-)
编辑一些说明：
- 我最感兴趣的是 UI 编码方面，而不是 UI 设计。
- 我需要大量的服务器交互 - 从并行开发的 RESTful Web 服务获取数据 - 因此需要拥有最新的服务器
I'm in the process of providing a Web UI as an alternative to our current desktop UI for our C/S enterprise application.
When developing the client-side in our desktop version, UI developers could connect to any server so they only needed the client-side environment.
When developing a Web UI (Client-side JavaScript in the browser), we are bound by the browser's "Same origin policy" so the UI must talk to the same server from which the UI code is downloaded.
As far as I see it till now, the development scenario for the UI guys is:
- Developer installs server on local
machine and runs it. - Developer edits the HTML+JS+CSS files on local installation.
- Developer has to reinstall/update server on local machine each time there's a need to test UI code against new server behaviour.
This does not seem too comfortable, at least compared to our previous C/S style development.
Are there any other ways you can suggest to that will not require UI developers from installing and updating server side components on their development machine ?
Or anything else related that can simplify the development process ?
Thanks :-)
Editing in some clarifications:
- I'm mostly interested in the aspects of UI coding, not UI design.
- I need a lot of server interaction - getting data from RESTful web services, which are developed in parrallel - hence the need to have an up-to-date server
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
您还没有指定开发平台。
就纯 HTML/JS/CSS 而言，您不需要服务器。 UI开发人员可以在本地微调UI组件。
当您想要与服务器对话/集成（通过 AJAX、JSP、ASP...）时，您需要连接开发服务器，因为现在您的更改必须由服务器提供服务。
大多数 UI 微调也可以通过 Firebug 完成。
在我们的办公室，当需要更改样式时，我们将页面保存为本地副本并将其发送给 UI 设计师，他进行更改，然后我们将其集成。 因此UI设计师不必维护开发环境。
You haven't specified the development platform.
As far as pure HTML/JS/CSS is concerned, you don't need a server. The UI developer can fine tune UI components locally.
The moment you want to talk/integrate to Server (via AJAX, JSP, ASP...) then you need to connect a development server as now your changes have to be served by Server.
Most of UI fine tuning can also be done from Firebug
In our office when changes to styling are required we save the page as a local copy and send it to the UI designer, he makes his changes and we integrate them. So the UI designer don't have to maintain a development environment.
JSONP 让您工作围绕同源问题（有服务器支持）——检查一下！ 如果浏览器前端开发人员使用良好的框架，例如 jQuery 或（我最喜欢的）Dojo，那么 JSONP 对他们来说应该不比纯 JSON 难。
JSONP lets you work around the same-origin problem (with server support) -- check it out! If the front-end-in-the-browser developers are using a good framework suc as jQuery or (my favorite) Dojo, JSONP should be no harder for them than plain JSON.
在共享服务器上进行开发，但取决于团队的规模……这在版本控制方面具有挑战性。
或者通过夜间构建部署自动生成的虚拟机，这样开发人员就不必安装，但始终使用最新版本。
对于依赖通用 REST 服务器的 UI 开发人员来说，UI 开发可以在本地计算机上完成，而 REST 服务应该在中央服务器上。 当对 REST 服务进行更改时，应将这些更改部署到中央服务器（稳定时），以便所有开发人员都可以使用最新版本（这也有助于测试数据）。
Develop on a shared server, but depending on the size of the team.. that's challeging with respect to version control.
Or deploy automatically generated virtual machines with nightly builds, so the devs don't have to install, but always use a recent version.
In the case of UI developers depending on a common REST server, the UI development can be done on the local machine and the REST service should be on a central server. When changes are made to the REST service these should be deployed to the central server (when stable), so all developers can use the newest version (this also helps with testdata).
您可以尝试在开发人员的计算机上使用代理，其中某些路径重定向到服务器，某些路径重定向到本地文件夹。
You could try using a proxy on the developer's machine where some paths redirect to the server and some paths redirect to local folders.
嗯，实际上我并没有真正获得有关您使用哪种技术的任何信息。 如果 - UI 开发人员 - 你指的是设计师，他们必须关心 CSS、布局等，那么我们会像 lud0h 所说的那样做。 我们（开发人员）向 UI 设计者发送服务器端生成的 HTML 页面的副本。 然后，他们根据辅助功能指南、CSS 和布局编辑 HTML 页面，并将其工作结果发回给我们。 然后我们使用他们的 HTML 页面将它们集成到我们的 Web 应用程序中。
如果您不仅要调整 CSS，还要编写 JavaScript/Ajax 功能，则必须使用与之通信的服务器。 正如您所说，通常这是通过拥有类似于服务器环境的本地环境来完成的。 在.Net Visual Studio '08 中提供了一个内部网络服务器，或者您必须在本地安装 IIS。 在Java环境中，您必须安装Tomcat和相关技术。 在我看来，这是必须的。 您必须拥有
我想这应该是专业开发环境应该包含的内容。 与 C/S 应用程序开发的区别在于，Web UI 和 Web 客户端代码不像 C/S 环境中的客户端 UI 与服务器端那样可分离。 除非你使用GWT或Silverlight等与C/S非常相似的技术进行开发，只是在浏览器内部运行，但通过RPC调用或Web服务进行通信。
//编辑：
我差点忘了什么。 不要直接在服务器上进行开发，这意味着所有开发人员都访问代码、UI 等所在的服务器文件系统！
Hmm, I actually didn't really get any information on what kind of technology you're using. If - with UI Developers - you mean designers, which have to take care about the CSS, layout etc, then we do it the same as lud0h said. We (developers) send the UI designers a copy of the server-side produced HTML pages. They then edit the HTML pages according to accessibility guidelines, CSS and layout and send us back the outcome of their work. We use their HTML pages then for integrating them in our web applications.
If you don't just mean tuning CSS, but also to write JavaScript / Ajax functionality you HAVE to use a server with which you're communicating. As you said, normally this is done by having a local environment which is similar to the server-one. In .Net Visual Studio '08 provides an internal webserver, alternatively you have to install IIS locally. In Java environments you have to install Tomcat and related technologies. In my eyes this is a must. What you have to have is
I guess this should be what a professional development environment should consist of. The difference to C/S application development is that web UI and web-client code are not that separable as a Client UI in C/S environment from the server-side. Unless you develop with technologies like GWT or Silverlight which are quite similar to C/S, just running inside the browser, but communicating over RPC calls or web services.
//Edit:
What I nearly forgot. Don't do something like developing on the server directly, meaning that all of the developers access the server's filesystem where the code, UI etc. lies!!
您可以使用 CORS。 一种类似于 Ajax 的新技术，但能够在其他域上进行调用。 因此您在一台服务器上只需要一个 UI。 认为这可以帮助你。
You can use CORS. a new technique just like Ajax, but with ability to make calls on other domains. so you will need only one UI on one server. think this can help you.