酷应用

不止 JavaScript 与 React，前端程序员必备的 9 大技能！

百家作者：CSDN 2019-01-21 12:43:20

作者 | Marty Jacobs
译者 | 苏本如
责编 | 仲培艺
出品 | CSDN（ID：CSDNNews）
如今，前端开发需要的不仅仅是用户体验的设计技能，开发直观的界面还需要高水平的编程能力。公司正在争相引入新的框架和概念，对前端开发人员的技能要求也因此越来越复杂。本文将重点介绍2019年作为前端开发人员所需的主要技能。

CS 基础知识

建议从掌握 CS（Computer Science，计算机科学）基础知识开始，这意味着对互联网、编码、网络技术、算法和基础问题的解决技能的了解，这些技能在前端开发时不可或缺。可以通过大学 CS 类的学位课程获取，也可以自学掌握，再常见的就是通过 CS 技能相关的训练营来获得。

HTML5/CSS3/JavaScript

HTML5、CSS3 和 JavaScript 是所有前端开发职位的必备技能。这些技能让你作为前端开发人员可以读写基本的网页，设置它们的样式（使用CSS），同时还能使用 JavaScript 添加动态行为/存储信息。

这里推荐三个 Codecademy 提供的基础知识课程：

Learn HTML5: https://www.codecademy.com/learn/learn-html
Learn CSS3: https://www.codecademy.com/learn/learn-css
Learn JavaScript: https://www.codecademy.com/learn/learn-javascript

REST

REST（Represential State Transfer，表征状态转移）是实现 Web 服务的另一种方法。它的基本思路是将网络上的任何一个实体都视为一个资源，每个资源都由一个唯一的统一资源标识符（URI）标识。以下面两个 URI 为例：

http://mywebservice.com/australia/ 将返回澳大利亚所有州、城市和郊区的完整列表
http://mywebservice.com/australia/queensland/ 将返回一个过滤后的列表，只显示昆士兰州的城市和郊区。

同样，这个 URI 是获取美国最近一次地震的 API 端点：http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=demo

这是一个实时的 REST 服务，当你在浏览器中单击这个链接，它将在页面上显示一段文本信息，内容是最近发生的一次地震（可能仅包括美国范围）。这个 REST 返回的数据是 JSON 格式，并显示在页面上。返回的 JSON 数据可以按照你应用程序的要求进行处理，并以你期望的任何方式显示出来。

需要注意的另一点是，REST 是无状态的。这意味着，当你访问上面链接的地震数据时，它返回的是这个资源的最新状态（即最近的数据）。你可以出去散一会儿步再回来，如果在此期间发生了新地震。那么再去访问这个链接的时候数据已经更新了，你再也无法访问散步前的数据。

下面列出 REST 的一些好处：

轻量级

可扩展，支持大数量的请求
可靠，无单点故障

SOAP

SOAP（Simple Object Access Protocol，简单对象访问协议）被设计来交换基于 XML 格式的“结构化信息”。它通过传输协议进行数据交换（消息内容独立于传输方法）。举个例子，一个 Web Service 提供者想要发布一个 Service，这个 Service 包括一个简单的可以被任意访问的 note，他们就会把这个 note 封装成 XML 格式：

然后对上述数据进行 SOAP 封装，封装后的 SOAP 消息体将包括下面的元素：

Enveloper 元素：将 XML 文档标识为一条 SOAP 消息

Header 元素：包含头部信息

Body 元素：包含所有的调用和响应信息

Fault 元素：用于错误处理

一旦这些元素被添加，SOAP 消息体就构造出来了，你就可以创建 Service 函数，例如 getNote()，然后通过更新 WSDL，将你创建的 Service 发布到 Web Service 库中，就如向电话簿添加电话号码一般进行更新，很方便。现在更新完 WSDL，Web Service 也可以被找到了。接着 Web Service 的使用者们就可以在他的应用中通过调用 getNote() 来使用这个Service，他们会收到一个 SOAP 响应，内含他们请求的 note。

SOAP 的优点：

平台无关、语言无关、传输无关

内置错误处理
使用某些产品时的自动化

React/Angular/Vue.js

React、Angular 和 Vue 都是用于编写用户界面的基于组件的 JavaScript 框架。它们允许灵活地与 API 交互，进行运算及在 Web 应用的前端显示各种形式的媒体。

这篇文章给出了基于组件的用户界面开发广受热捧的 6 大原因：https://www.tandemseven.com/technology/6-reasons-component-based-ui-development/

Web 服务器编程

Web 服务器编程是指所有代码运行于服务器端的编程。一个基本的示例通常包含用户向服务器发出 HTTP 请求，然后服务器将内容返回到用户界面。想想看，好像所有动作都发生在后台。

Node.js 也被称为服务器端的 JavaScript，它运行在 JavaScript 引擎上，使用事件驱动和非阻塞 I/O 模型。Node.js 是我们推荐的 Web 服务器编程语言，因为它有世界上最大的库集合之一，我们称之为 Node package manager（NPM）。Node.js 开发社区分布全球，贡献了大量免费且功能丰富的 Library。这个快速的框架是一个轻量级框架，允许中间件响应 HTTP请求。它还具有路由表功能，方便开发人员指定 HTTP 方法和 URL。这个快速框架还是开发 API endpoint 的理想选择，它允许开发人员轻松、高效地构造 endpoint。

Node.js 是经过深思熟虑的选择，不仅因其功能丰富，更因为它是最适合构建可扩展系统的框架，使项目移交更便捷。因为它与 JavaScript 同源，所以也很容易理解。现在主要的云平台，如 AWS、Azure 和 GCP 都支持 Node.js。

版本控制（Git）

作为前端开发人员，你所编写的代码可能只是整个项目的小部分。版本控制有助于维护你手头正在做的项目代码，而不会破坏整个项目，保证了其他开发人员可以在同一项目上工作。现在大多数公司都推荐使用 Git 作为他们的主要版本控制系统。

想了解更多版本控制信息，可以参考：http://www.zeroequalsfalse.press/2017/02/18/beginning/

基于用户体验的网页设计

这里我不会告诉你如何设计一个网页、应该使用什么颜色、它看起来应该怎样等等。我要说的是你不要做什么：

网页设计的“5 不要”：

不要使用没有对比度的颜色

不要让网页有太多东西

不要让网页太慢

不要有无关的内容，比如在一个园艺博客网站上出现健身内容。
不要停止改进

简约等于速度

以 Zero Equals False 的网站为例，它只使用白色背景和黑色文本，几乎没有其他内容。由于网页上只有文本，它加载时间很短，在 5 秒内就能完成，提供了最优的用户体验。

简约设计是一个基于现实考量的设计原则，想想苹果公司和他们的产品。他们的整个品牌都建立在简约的基础上。人类喜欢简单，所以为什么不去做简单的事情，而是重新造明轮子呢？

总结

前端开发人员的角色已经转变，现在它不仅需要用户界面/用户体验技能，而且需要更多的编程技能。如果你掌握了版本控制、服务器端编程、HTML/CSS/JavaScript、基于组件的 JS 框架、Web 服务（如 SOAP 和 REST）等技能和知识，你就打下了良好的计算机科学基础，也将有机会获得成功。

希望本文对你帮助！

原文：https://www.zeroequalsfalse.press/2019/01/10/frontend/
本文为 CSDN 翻译，如需转载，请注明来源出处。

热文 推荐

☞ 苹果，衰于中国

☞ 社交网络的先烈们

☞ 如何攻克 Android 调试难题？| 技术头条

☞ V神说，解释以太坊2.0最好的文章就是这篇了

☞ 黄鳝门”视频女主播一审宣判！

☞ Kafka学习笔记

☞ 12306能扛住明星出轨这种流量冲击吗？

☞ 心疼！能为程序员男友做些什么吗？

print_r('点个好看吧！');
var_dump('点个好看吧！');
NSLog(@"点个好看吧！");
System.out.println("点个好看吧！");
console.log("点个好看吧！");
print("点个好看吧！");
printf("点个好看吧！");
cout < < "点个好看吧！" < < endl;
Console.WriteLine("点个好看吧！");
fmt.Println("点个好看吧！");
Response.Write("点个好看吧！");
alert("点个好看吧！")
echo "点个好看吧！"