《杭JS》会议 & Nodejs 前端 UI 分离方案

《杭JS》会议 & Nodejs 前端 UI 分离方案

终于空出时间写下了 《杭JS》 的会议纪要： https://github.com/fsiaonma/fsiaonma.blog.com/issues/5

3 回复

《杭JS》会议 & Nodejs 前端 UI 分离方案

终于有时间写下《杭JS》的会议纪要。这次会议主要讨论了如何通过Node.js实现前端UI分离方案，以提高开发效率、代码可维护性和团队协作能力。

为什么需要UI分离？

在现代Web开发中，单页面应用（SPA）越来越普遍。为了更好地组织代码、提高开发效率以及便于团队协作，将UI逻辑与业务逻辑分离是非常必要的。UI分离可以使得前端工程师专注于界面的设计和交互，而后端工程师则可以专注于数据处理和业务逻辑的实现。

使用Node.js实现UI分离

在Node.js环境中，我们可以使用一些流行的框架和库来实现UI分离。例如，React、Vue和Angular等前端框架可以帮助我们构建独立的UI组件，并通过API与后端进行通信。

示例代码：使用Express + React实现UI分离
  1. 安装依赖

首先，我们需要安装Node.js环境并创建一个新的项目目录。然后，初始化项目并安装必要的依赖：

mkdir frontend-separation
cd frontend-separation
npm init -y
npm install express react react-dom
  1. 设置服务器

接下来，我们需要设置一个简单的Express服务器来提供静态文件服务，并处理前端请求：

// server.js
const express = require('express');
const path = require('path');

const app = express();
const port = 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});
  1. 创建React组件

在public目录下创建index.html和index.js文件，并编写一个简单的React组件：

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="/index.js"></script>
</body>
</html>

// public/index.js
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => (
    <div>
        <h1>Hello, World!</h1>
        <button onClick={() => alert('Button clicked!')}>Click Me</button>
    </div>
);

ReactDOM.render(<App />, document.getElementById('root'));
  1. 启动服务器

最后，运行服务器并访问http://localhost:3000以查看React组件：

node server.js

通过这种方式，我们将前端UI逻辑与后端逻辑分离，使得前端开发更加灵活和高效。同时，这也为团队协作提供了更好的支持。


继《京JS》后，再遇《杭JS》

会议纪要

参加了6.21、6.22为期2天的杭JS会议，再次听到多为前端大牛的精彩演讲。可惜的是出发前遇到大雨，飞机延误，导致错过了21号下午部分演讲，幸好有 slider 和 ppt ，尽可能地弥补错过的环节。回到广州，赶上原来的工作进度后，总算能找出这么一段时间，记录一下杭JS会议的精彩内容。

《Then.js 异步库的实现原理及优缺点》—严清

从异步编程原理开始，引入异步编程话题，对比了各种异步编程方案和原理，如： Callback、Event、Promise、Generator，也对比了主流的多个异步编程框架，如：when、co、async，再通过代码实例与数据，阐述 thunk 与 Then.js 的优缺点。

《淘宝前后端分离实践》 — 赫门

赫门同学的演讲提到了多个令人眼前一亮的观点，演讲也非常的生动。首先，赫门同学打破了一贯的传统，重新定义了前后端，将原来的：前端面向浏览器，后端面向服务器。重定义为：前端浏览器 + nodejs，后端服务器。把 nodejs 划分到前端范畴，nodejs 主要能承担3项工作，数据转发，路由逻辑控制，渲染页面以达到效果优化。一句话印象尤深，“首屏 nodejs 渲染，其他客户端渲染”。

《优化你的Angular Web App》— sofish

之前有了解过 sofish，来杭州时也听朋友提起过他，在他的分享中，并不是默认大家都是 ng 大神，恰恰相反，他从基础出发，从最基本的层面阐述 ng 的优化方案以及使用技巧，同时带出一系列外围工具，方便大家开发与使用。

《开源项目的管理与维护》— 郭宇

相信大家看到郭宇同学的第一印象和我应该相同，认识到郭宇同学对开源项目的热衷程度接近疯狂，从他的项目就能看到她对开源的理解与热爱，他的分享也无不贯穿这个主题。

《如何持续技术学习》— 玉伯

玉伯同学不用说，相信大家都一定了解，sea.js 作者，github 排名第一，已经没有不认识他的理由。这次会议他并咩有分享技术性话题，而是谈到了我们的生活，我们的学习，以及成长。有一点个人是非常赞同的，“我们必须找到一件能让自己沉下心来的事情，哪怕是背单词也好，能找到这件事情，便能过渡每一个让我们烦躁的时刻。”虽然并不是他分享的重点，但这句轻描淡写的话，确是有点睛之用。玉伯同学同时提出，ouput > input，只有当我们产出的时候，自然而然会自己寻找资料，主动学习，大家应更关注与做，而不是关注与学，只有在做的过程中才能有真正意义上的学。

《Web Components标准：前端开发的新一次技术革命》 — 陈本峰

Web Components 能算上是一种革命，能让开发者足够的疯狂，陈本峰作为 W3C 标准制定者之一，能带给我们的便是下一代 web 标准的变化，同时告诉我们 web 发展的趋势，同时介绍了云适配公司的开源 UI 库，另人惊喜。

思考

前端工程师 与 UI设计师 的分离实践

赫门同学的分享，使我想起了曾经的一个项目，与赫门同学不同，不在于前后端职责分离，而是更细，前端工程师与UI设计师的职责分离，在前端工作的过程中，其实我们需要明确，前端工程师的涉及范畴，设计师的涉及范畴。

以往的工作方式

UI设计师画好场景图，UI设计师切成小图，前端工程师拿到小图重新还原成前端场景，再继续写前端业务逻辑，实现与服务器接口对接等逻辑。

缺点

  • UI设计师应该只管效果图，不需理会业务逻辑，前端工程师应该只管业务逻辑，不需理会场景拼接。而在我们的传统合作方式中，这部分工作总有多多少少的重合。
  • UI设计师已经画出了场景，却要把场景拆分，前端工程师却重新把拆分后的组合，这部分工作一次拆，一次组，双方都做了一定程度的无用功。

优化后的工作方式

UI设计师直接设计好原图，通过工具货脚本，直接生成到html文件，中间过程通过工具过渡。

优点

  • 使得工作职能更加明确，UI设计师专注于设计，前端工程师专注于业务逻辑。

现实情况

由于以前开发游戏项目，已写了一套叫 Psdium-Views 工具，这里是 工具 说明，当时实现了 psd 场景图到游戏场景的过渡，由于只是项目需要，只是实现了简单的效果，现开源该项目，希望能让大家参与进来，完善该项目，最终能投入到前端应用中使用，实现 UI 与 程序 的清晰分离。

《杭JS》会议 & Nodejs 前端 UI 分离方案

前端 UI 分离是现代 Web 开发中非常重要的一个实践，它可以提高代码的可维护性、复用性和团队协作效率。在《杭JS》会议上，我们讨论了如何使用 Node.js 来实现前端 UI 的分离。

为什么需要前端 UI 分离？

在传统的 Web 开发中，HTML、CSS 和 JavaScript 往往混合在一起，导致代码难以维护和扩展。UI 分离可以使这些资源更加模块化和可管理，从而提高开发效率和代码质量。

实现方法

我们可以使用一些工具和框架来帮助实现 UI 分离，例如 webpack 和 React。下面是一个简单的示例，展示如何使用 webpack 来打包前端资源，并使用 React 来构建组件化的 UI。

示例代码

首先，我们需要安装必要的依赖：

npm install --save-dev webpack webpack-cli
npm install react react-dom

然后，创建一个简单的 React 组件：

// src/components/Button.js
import React from 'react';

const Button = ({ text, onClick }) => (
  <button onClick={onClick}>
    {text}
  </button>
);

export default Button;

接下来，配置 webpack 打包工具：

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

最后，编写入口文件 index.js 并启动项目：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Button from './components/Button';

ReactDOM.render(<Button text="Click Me" onClick={() => console.log("Button clicked")} />, document.getElementById('root'));

通过上述配置，我们已经实现了基本的前端 UI 分离。在实际开发中，你可以进一步使用 webpack 配置更多的优化选项，如代码分割、资源压缩等，以提升应用性能。

希望这个示例对你有所帮助！如果你有任何问题或建议，请留言交流。

回到顶部