淘宝 UED 关于前端和 Node.js 的文章

淘宝 UED 关于前端和 Node.js 的文章

淘宝人写的文章：http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/
NCZ 大神（JavaScript高级程序设计作者）的文章：http://www.nczonline.net/blog/2013/10/07/node-js-and-the-new-web-front-end/
大概意思就是多一个 Node 层，做模版渲染之类的工作，这一层前端来写。
各位怎么看？单纯为了语言一致就选择 Node，感觉有点浪费 Node 的性能优势了。 楼主又多看了几遍 NCZ 大神的文章和评论。这两段话越看越有感觉。

Tell us how to get the data we need and how to tell the business logic what to do with the data, and we are able to craft beautiful, performant, accessible interfaces that customers will love. … We can get to a web application development panacea: where front-end and back-end only speak to each other in data, allowing rapid iteration of both without affecting the other so long as the RESTful interfaces remain intact. Jump on in, the water’s fine.


6 回复

淘宝 UED 关于前端和 Node.js 的文章

引言

在现代Web开发中，Node.js 的出现为前端开发者带来了更多的可能性。淘宝UED团队的一篇文章详细讨论了如何通过引入Node.js层来实现全栈开发。同时，NCZ大神（《JavaScript高级程序设计》的作者）也分享了他的观点，强调了Node.js在前端和后端之间通信的重要性。

前端与Node.js

从前端的角度来看，Node.js可以用来处理模板渲染、数据处理等任务。这种做法不仅可以提高开发效率，还能保持前后端语言一致性，使得前端开发者能够更好地掌控整个应用的逻辑。

示例代码

假设我们有一个简单的博客系统，需要在客户端展示文章列表。我们可以使用Node.js来处理模板渲染和数据获取。

服务器端(Node.js)

const express = require('express');
const app = express();
const posts = [
    { id: 1, title: 'Node.js入门', content: 'Node.js是一种用于构建快速、可扩展的网络应用的JavaScript运行环境。' },
    { id: 2, title: 'React基础', content: 'React是一个用于构建用户界面的JavaScript库。' }
];

app.get('/posts', (req, res) => {
    res.json(posts);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

客户端(HTML + JavaScript)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog Posts</title>
</head>
<body>
    <div id="posts"></div>
    <script>
        async function fetchPosts() {
            const response = await fetch('http://localhost:3000/posts');
            const posts = await response.json();
            const postList = document.getElementById('posts');
            posts.forEach(post => {
                const postElement = document.createElement('div');
                postElement.innerHTML = `<h2>${post.title}</h2><p>${post.content}</p>`;
                postList.appendChild(postElement);
            });
        }
        fetchPosts();
    </script>
</body>
</html>

讨论

尽管引入Node.js层可以提高开发效率，但也要注意其性能问题。如果只是为了语言一致性和方便管理而选择Node.js，可能会浪费其高性能的优势。因此，在实际项目中，应根据具体需求权衡是否引入Node.js层。

总结

通过引入Node.js层，前端开发者可以更好地控制应用的整体逻辑，实现前后端分离的同时保持代码的一致性。然而，这种做法也需谨慎评估，确保不牺牲性能。正如NCZ大神所说，“告诉我们如何获取所需的数据，并告知业务逻辑如何处理这些数据，我们就能创造出客户喜爱的漂亮、高性能、无障碍的界面。”


这么做主要是希望解决协作和职责划分的问题，前端自由度提升，前后端联调工作量减少，接口清晰后也方便自动化测试，对于大团队来说可以大幅度提升整体效率，而性能从来都不是重点考虑的因素

其实…就是把做APP的那套…搬到了web…

为什么一定要性能比其他高才选择这门语言呢？ 选择语言的原因有很多啊，开发效率、团队对语言的熟悉程度、对语言的适应程度，感觉到最后才是性能。 过早的优化（特别是从语言选择上的性能优化），都是没有任何意义的。 node 的性能虽然是很不错，但是也不能够说一定比xxx语言高。但是可以保证的是，当你想优化它的时候，它可以提供一个相对来说较高的优化空间。

默默地+1

关于“淘宝 UED 关于前端和 Node.js”的帖子内容，可以总结为利用 Node.js 来实现从前端到后端的数据处理和交互。这不仅能够简化开发流程，还能提高开发效率。

示例代码

以下是一个简单的示例，展示如何使用 Node.js 进行数据获取和处理，并通过 RESTful API 提供服务给前端：

1. 创建一个简单的 Express 服务器

首先安装 Express：

npm install express

然后创建 server.js 文件：

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

// 模拟数据库数据
let data = {
    "name": "淘宝UED",
    "message": "欢迎使用Node.js进行前后端开发"
};

// 获取数据的API
app.get('/api/data', (req, res) => {
    res.json(data);
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});

2. 前端调用这个API

前端可以通过 AJAX 请求来获取数据并渲染页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js Example</title>
</head>
<body>
    <div id="content"></div>
    <script>
        async function fetchData() {
            const response = await fetch('http://localhost:3000/api/data');
            const json = await response.json();
            document.getElementById('content').innerText = `${json.name}: ${json.message}`;
        }

        fetchData();
    </script>
</body>
</html>

解释

  • Node.js 作为中间层：这里使用 Node.js 和 Express 框架搭建了一个简单的 Web 服务器。服务器负责提供数据给前端，前端通过 AJAX 调用该服务器的 API 来获取数据并渲染页面。

  • RESTful 接口：服务器暴露了一个 /api/data 的 RESTful API，前端可以通过标准的 HTTP 请求方式（如 GET）来访问该接口。

  • 前后端分离：通过这种方式，前端专注于界面逻辑，而后端专注于业务逻辑和数据处理。两者通过标准化的数据接口进行通信，使得开发更加模块化和高效。

这种方式不仅提升了开发效率，也使得前后端可以独立迭代，互不影响。

回到顶部