CSDN资讯

这里,有作为技术人必须知道的业界大事。

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

640?wx_fmt=gif

640?wx_fmt=jpeg

作者 | Marty Jacobs

译者 | 苏本如

责编 | 仲培艺

出品 | CSDN(ID:CSDNNews)

如今,前端开发需要的不仅仅是用户体验的设计技能,开发直观的界面还需要高水平的编程能力。公司正在争相引入新的框架和概念,对前端开发人员的技能要求也因此越来越复杂。本文将重点介绍2019年作为前端开发人员所需的主要技能。


640?wx_fmt=png

CS 基础知识


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


640?wx_fmt=png

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


640?wx_fmt=png

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 的一些好处:

  • 轻量级

  • 可扩展,支持大数量的请求

  • 可靠,无单点故障


640?wx_fmt=png

SOAP


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

640?wx_fmt=png


然后对上述数据进行 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 的优点:

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

  • 内置错误处理

  • 使用某些产品时的自动化


640?wx_fmt=png

React/Angular/Vue.js


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

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


640?wx_fmt=png

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。


640?wx_fmt=png

版本控制(Git)


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

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


640?wx_fmt=png

基于用户体验的网页设计


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

网页设计的“5 不要”:

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

  • 不要让网页有太多东西

  • 不要让网页太慢

  • 不要有无关的内容,比如在一个园艺博客网站上出现健身内容。

  • 不要停止改进


640?wx_fmt=png

简约等于速度


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

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


640?wx_fmt=png

总结


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

希望本文对你帮助!

原文:https://www.zeroequalsfalse.press/2019/01/10/frontend/

本文为 CSDN 翻译,如需转载,请注明来源出处。


 热 文 推 荐 


苹果,衰于中国

社交网络的先烈们

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

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

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

☞ Kafka学习笔记

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

☞ 心疼!能为程序员男友做些什么吗?

640?wx_fmt=gif

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

640?wx_fmt=gif点击“阅读原文”,打开 CSDN App 阅读更贴心!

640?wx_fmt=png喜欢就点击“好看”吧


没有更多推荐了,返回首页