Web 开发 17 年的所见所得

2017/07/10 · 基础技术 ·
WEB,
开发建议

原文出处: Daniel
Khan   译文出处:众成翻译/myvin   

英文原文:Skills JavaScript Developers Should Learn in
2016
译者:xxholly32
译文地址:http://t.cn/R5HIDVI

By @jonathanzwhite

语言/平台

图片 1

 

Node.js第一,PHT第二,JavaScript第三。因为Node.js的社区很多,所以这个结果你也不用太意外。如果你知道JavaScript,你已经一只脚踏进了用Node.js来构建Web
APP的可能。

关于 NodeConfBP

NodeConfBP 会议于 2017 年 1
月在布达佩斯召开,本次会议为期一天,只有一个演讲室,由 RisingStack –
the Node.js Consulting & Development Company
组织并提供赞助。

下面你将会从第一人称视角感受到一个近乎完美的风格化的会议记录:

JavaScript –
由于它是web开发中最基本的语言,无论你怎么看待它,我们都要去考虑它的”未来”。毕竟,浏览器可能是PC和移动设备都在使用的最广泛的软件应用程序了。

版权申明:
此文章首发于公众号程序员在深圳,搜索 studycode 即可关注
本文无需授权即可转载,转载时请务必注明作者

 框架

图片 2

 

AngularJS处于框架的领导地位。大量的公司和企业已经采用Angular,这就要求开发者更多的具备使用这个框架的技能。主要还是因为有Google里最好的工程师支持。

认识下 Daniel Khan

DynaTrace 做过的任何和 Node
沾点儿边儿的项目基本上我都过了个遍。另外,我还在给 Lynda
做辅导课程。我在当地大学教书,有三个女儿和一个儿子。

这次讲话基本上都是我的故事,涉及到了我 17 年学到的关于 Node 的一些东西。

在我看来,世间万物都是循环的,它们会反复出现,因此我们能够以史为镜,避免重蹈覆辙。

图片 3

这张照片拍摄于 1997
年,是我第一张使用网络摄像头拍摄的照片,照片上右边的那个家伙就是我。

我们购买这台 silicon graphics O2
差不多花了一辆小轿车的价钱,然后这个家伙跑过来说“现在我们正在使用网络摄像头一起拍照”。然后
哇哦 照片就出现在互联网上了,在那个时候这真的是一件特别炫酷的事情。

1998 年我就已经开始玩 HTML 了。

图片 4

当时的网站看起来和图片上展示的差不多,而且那个时候这本书还没写呢。

那个时候还木有 Google,木有 Facebook,木有 GitHub,木有
Wikipedia,也木有 StackOverflow。

那个时候我们只有新闻组,我们可以在上面提问,其他人也可以回答问题。有点儿像
email,但和 email 还是有区别的。

图片 5

时间走到了 1999 年,也就是 17 年前,我在 Square 新闻组里写下了我的问题:

  • “我正在写 web 数据库,但是我们已经有桌面数据库了呀。”

是的,Microsoft Access!

  • “我的主机支持 MySQL,但是我并不知道这是什么意思…”

我真的不知道。

  • “我知道 query 语句是如何运行了。”

其实,我完全不知道。

那个时候,我真正学到的一点是:网络永远不会遗忘。那时我真的是毫无头绪。

开发人员都知道,JavaScript世界看上去动荡不安甚至有些混乱(e.g. the
left-pad
incident),但这也是说明了这门语言正在不断的完善。它试着去完善一些老的问题(通常是相关扩展或者复杂的问题)以跟上现在的发展趋势。

这篇文章是”前端开发,从草根到英雄系列”的第二部分,在第一部分,你学到了如何使用HTML和CSS创建布局的最佳实践。在第二部分,我们会把JavaScript作为独立的语言来学习,我们将学习如何添加交互式的界面,JavaScript设计以及设计模式,最后我们会学习如何创建web应用。

 2015你应该学习的

很多的库和框架产生和消亡,对于把有限的精力投入到最有价值的事情上是有挑战的。下面是我们的一些关于语言和框架的建议,这些都是我们认为很有意义去学习的。它们都很流行,有活跃的社区,并且有大量的就业机会。

进入 2000 年

在 2000 年我成为了一名 web 开发者,当时我在给 Austrian Job Service 教
Perl,因为在那个时候,找不到工作的人基本上都能成为一名 web
开发者,在当时这是种趋势。

那个时候 Perl 语言非常难,但是既然我已经准备教 Perl 了,那就是说明…

我非常非常聪明,是吧?

但是,真相永远是残酷的:其实我一点儿都不聪明。

当我尝试在数据库中更新数据集时,因为我不知道如何实现才算合理,所以一开始我的做法是先删除然后再插入。

图片 6

那么问题来了:就我这种水平,我又怎么会认为我自己还能教学呢?答案就是:达克效应。

简单来说,达克效应就是:因为你无知,所以你不知道你自己有多无知。

图片 7

那条绿线是你认为你知道的东西,那条黑线才是你真正知道的。那个时候,我认为自己无所不知,直到我完成了大学学业–应该是在
2011 年–我才知道 “好吧,其实我知道的也就那点儿东西”。

然后,你就开始变得稍微谦虚一些了,因为你开始学习那些你不知道的东西,接着你就开始有点儿绝望了。现在,我认为我在那个绿点的位置。

随着需求的变化,特别是在这技术日新月异的时代。你也许不知道以下这些技术,但想要提高或者完善你的技能,无论是了解Javascript的发展走向,还是让你更好的进入这个领域,它们都是你需要关注的(尤其是那些初学者)。

和HTML、CSS一致,网上有大量的JavaScript指南,对于新手来说,很难分辨这些指南分别的用途,也不知道以怎样的顺序去学习这些指南。这篇文章的目的是给你提供一个线路图,作为你成为一个前端工程师的导航。

  1. 无所不在的JavaScript

 

图片 8

 

如果你做web的开发,Javascript是你必须知道的,不管你写后台用的何种语言。现在你可以用JS在浏览器、服务器、手机应用甚至是可编程的硬件。ES6
将会提高并让这个语言更加强大。学习Bower
和npm工具是很有必要的,也包括jshint 和 jscs这种代码样式和代码检测。

我们去了银行…

但是不管怎么着,我设法找到了一家公司,然后买了一台服务器。这台服务器还是我们去银行贷了
15,000 欧元买的。

和之前相比,现如今变化真的很大:我们有 serverless
架构,你可以一台服务器都不用就把整个公司创建起来。

那个时候,我们不得不把服务器放在维也纳的一个数据中心的机架上。

每当服务器宕机的时候,我就得开着车到维也纳去重启服务器。

图片 9

那次我学到的东西就是:你要努力理解什么是全栈。我说的就是上面的这个全栈。

全栈,意味着你至少应该知道一点儿 web 协议、知道路由的工作原理、知道 HTTP
基本的工作机理、知道 SMTP 的工作机制。

当出现问题的时候,知道这些包是如何打包进浏览器的,知道这些东西是如何协调的是很有必要的。

那么,到底2016年javascript开发方向是什么(或者2017年又会有什么新的动向)?

如果你还没有阅读第一篇,在读这篇之前,可以点击下面的链接阅读

  2. AngularJS

 

图片 10

 

AngularJS是一个Google发明的JavaScript框架,它能快速的构建企业级的web应用。快速的需求增长要求程序员有这个框架的使用经验,很多时候,你会看到招聘工作的时候会涉及这个框架的使用。但是别太着急。它将会有一个大的重写,在它的2.0版本发布后再学习是个更好的方式。可以查看学习指南angularjs
examples.

然后夜幕降临,迎来 2002 年

现在我们是在 2002
年,我创建了一家公司。那个时候,除了澳大利亚,互联网在全球爆炸式疯长。

我们静静地等待着互联网的繁荣有朝一日能够降临到我们身上,然后一切都结束了。

图片 11

我认为这一切都是从 boo.com 开始的,这是一家运营时尚服饰的初创公司。

在那时,每个人都花大把大把的时间去投资和新经济、新媒体相关的项目,所以整个行业开始繁荣增长。

在两个月内,公司从 10 个人涨到了 100 个人。然后,boo.com 破产了。

我认为那年的互联网危机和他们有关。所有的投资者差不多都退出了,因为他们意识到新经济公司终将会失败。

图片 12

这是纳斯达克的数据。我们当时在这个繁荣阶段,紧接着一切都奔溃了。这里是
9/11,一切都随风而逝…

我在 Google 上搜索了一下,这是那个时候硅谷人的想法,你们感受下。

图片 13

我找到了一个哥们儿这样写到:

“噢,我的天呐,这简直是致命的打击。作为一个年轻的初创公司,我知道的每个人都受到了影响。我知道的大多数人都失去了工作。不久之后,我知道的大部分人都搬走了。”

在这里他写到:

“泡沫时代的对比是史诗级的。开放式的酒吧活动和神话般的发布会都已经一去不复返了。工作和公司也都没有了。不久之后,绝大多数企业家没有了安全保障–很多人回到家里重新组团。”

听着有些熟悉,是吧?

如果今天你去硅谷,看到的也是这个样子。一切都是新兴的。工作在那里的人都是这样的:

“什么?他们公司没有自助早餐?

他们没有这种桌式足球?

噢,我不想在那儿工作了–我想买架飞机。”

图片 14

这种事情随时都会重现。不过那个时候,我们看到的更多一些。

尽管如果现在我说就算这种事情发生了也不会有什么问题,但是真的当这种事情发生了的时候,就真有问题了。

javascript 趋势

  3. React

 

图片 15

 

React是新的竞争者,但它是可提供复用的web组件。这个库是Facebook开发并实现了非常快的虚拟DOM,并能很简单的接入到现有项目中去。它也有非常活跃的社区来提供开发组件all
kinds of
components.在我们看来,Reacts是非常有潜力的并值得在2015年关注的。查看我们的学习指南react
tutorial.

趁热打铁,抓紧机会!

我从中学到的一件事是:一定要趁热打铁,抓紧机会!我现在并没有高谈阔论地去谈钱。

我正在谈论的是通过投资于你的技能和知识来随时应对不好的时代。

拒绝平庸,对吧?!

编程语言太多了,我认为编程并不是说一定要成为一名 JavaScript 开发者或者
Node 开发者。编程是一种概念、一种思想。就比如,当你在用 JavaScript
写实例的时候,可以尝试一下 Scala 函数式编程的一些东西。

最开始我在 Lynda 和 Coursera 工作,这让我真正的理解了
JavaScript,理解了我使用 underscorejs
的原因,理解了怎样才能让需要的东西更好的融合起来。

所以我想鼓励你们的是:不要把你自己当成一个 JavaScript 开发者或者 Node
开发者,要把你自己当成一个工程师。

要学习思想、学习如何使用不同的语言去解决问题。你的视野决定你的世界,掌握知识面越广我们对问题的思考就会越灵活。

图片 16

这是我这次学习的课程。这真的很难,但是这是发明 Scala 的 Martin Odersky
做的,所以他知道他在做什么,这真的很有趣。

所有的这些资源在互联网上都是免费的,所以如果你有时间的话,可以投入一些时间和精力培养一下你的技能。

node.js已经众所周知了,后面的内容我们也不会提它,因为它太有名气了…..

JavaScript基础

JavaScript是一个跨平台的程序语言,它几乎可以做所有事情。在你了解了开发者如何使用JavaScript的基础之后,我们再详细的探讨这门语言。

  4. Node.js

 

图片 17

 

用Node.js你可以用JavaScript来实现服务端的应用。它可以很简单的实现后台,像这些框架Express,API
endpoints, websocket甚至torrent clients.
Node有令人难以置信的活跃的社区超越任何其他一种语言在这一年实现的模块。如果你是个初学者,我们推荐你尝试下NodeSchool.

为未来的你写代码

然后,在 2002 年到 2012 年之间我做了许多项目,大部分都是 web
项目,许多是基于 PHP
的,不管你相不相信,其中的一些项目到现在仍然在线上运行着,比如下面这个:

图片 18

它们今天还在困扰着我。因为这些应用是我在 2002 年或 2004
年或其他的什么年份完成的,我从来没有想过,在
2015年、2016年、2017年,我还能再次看到他们。

但是之后一通电话打过来了:”这个网站挂了,你能不能帮我们搞搞?”–尽管我早已经不是这个公司的员工了。

然后一万只草泥马在奔腾:

“哎呦,我去,这代码是哪个傻逼写的,写得太烂了。”

…恩,我知道这个傻逼就是我。

在我看来,写出未来的你能够理解并引以为豪的代码是很重要的!当你做一件事情的时候,要么不做,要做就把它做好。

React & Redux

2015年是React获得肯定的一年,越来越多的开发者在2014年尾声开始抱怨Angularjs的一些问题,也有新闻说道,Angular2
将会和 Angular1 不兼容。

如今的现状是,Angular1
仍然在Github上备受关注。同时它的增长也开始放缓,而React正快速的填补这个缺口。

github star 增长图

图中的数据基于互联网。

也许更能说明问题的指标是:reactangularangular2
三者的包在NPM的下载量:

angularjs vs react

出自 NPM
走势

但是,这些数据并不能真实的代表这些框架的使用情况。有一点要考虑的是自从Angular1被Angular2替代之后,它并没有任何升级。更不必说,React不是一个框架,不能够和AngularJS一起用。所以说,这两者其实是没法放在一起对比的。

尽管如此,大概在去年一年里,JavaScript社区对React的支持比Angularjs要多一些。

看图表,你可能会问:在8月后发生了什么?React在npm的下载数量突然以指数倍的方式暴涨,Github的关注数量快要接近AngularJS的数量。

同时,Redux出现,由它的创作人Dan
Abramov发布在
ReactEurope2015
7月的会议上。Redux是一个类似flux的实现,让很多开发者确信这更适合并能够推动React的发展。

在Redux出现前,React已走过了一段坎坷,大家试图找出如何最好地实现”Flux”的架构。许多更好的实现方式涌现出来,但对于Javascript开发者来说还是缺少一个全面完整的解决方案。因此,尽管React在DOM表现层处理有多优秀,开发者还是对采用这个技术到项目中保留自己的意见。

如今,随着越来越多的开发者开始关注和使用Redux,并且认识到测试和debug
JavaScript是如此方便。Redux开始替代Flux成为了新的赢家。

由于2016年Javascript在前端领域的地位,同样的,React 和
Redux也变的炙手可热了。知名公司如:Netflix,Dropbox,
雅虎都已经开始使用React,并给与其很大的信心。

尽管这样,Facebook的Relay框架将在2017年成为Redux的最大挑战者。

你也许会阅读这篇文章:Getting Started With React & Redux: An
Intro

语言

在学习JavaScript是如何应用于web之前,首先了解这门语言本身。我们来读一下Mozilla开发者网络的Language
basics crash
course,这个指南会描述基本的语言结构,包括变量,条件和函数。

在此之后,再读一读MDN的JavaScript指南的以下几个部分:

  • 语法和类型
  • 控制流和错误处理
  • 循环和遍历
  • 函数

不要过于担心记不住特定的语法,你随时可以回过头来查阅。相反,你要专注于像变量实例化、循环和函数等概念上。如果一时消化不了是正常的,可以适当的略过,学完后面内容再时不时回顾一下前面的内容。因为当你练习这些概念时,你才会对这些更加深刻。

为了打破单调的纯文字内容的学习,可以看一下Codecademy提供的JavaScript课程,它很容易上手,并且非常有趣。同样的,如果你有时间,对于每一个我上面列出的概念,读一下Eloquent
JavaScript相应的章节,相信可以加深你的理解。Eloquent
JavaScript是一个非常棒的在线书籍,几乎所有的有追求的JavaScript前端工程师都会阅读它。

  5. NoSQL databases

 

图片 19

 

既不是关系型也不是SQL查询型的数据库是对今天的web开发者更有价值的,我们相信这样的数据库将会在未来更加的流行。有两个值得关注的是Mongodb
and
Redis.很容易使用它们中得任意一个比起MySQL和Postgres.但是别傻傻的认为NoSQL数据库就是完美的取代—有的情况,那些经典的关系型数据库还是会让你的开发更简单。

代码的破窗效应

我最喜欢的一个理论是破窗效应–这个理论也可以应用到代码上。

想象一下,你身处一座城市,站在一座高楼面前,周围的一切都很美好。然后突然一个哥们儿跑过来打破了一扇窗户。

如果你等上几个星期再回去看,你会发现整座高楼开始腐烂,摇摇欲坠,到处都是乱七八糟的涂鸦,人们也不再
care 它了。

同样这也适用于代码,那些临时的解决方案就是高楼上的破窗,是吧?

“恩,是的,我们改天再改吧。”

然后那些临时的代码片段还保留在那里,然后等到下一个开发人员(有可能还是你噢)过来看了看这代码,然后说:

“好吧,这个已经很糟糕了,我们快速修复下,然后代码又变得糟糕了。”

所有这些丑陋的代码片段都充斥在你的代码里。就算十年过去了,你还是得处理这些代码,所以你为什么不提前和你的小伙伴商量一下?你应该这样想:

“这是一个旧项目了,让我们把这个项目重写一遍吧。”–因为这就是我们喜欢的做事的方式,对吧?

图片 20

我经常听到开发者这样说
“看,这个项目是我们两年前写的,整个技术栈都已经落伍了,我们把所有的东西都重写一遍吧,很简单的,两周就能搞定!我们已经开搞了是吧?”

图片 21

我们知道软件都有一个饱和曲线。有时候给代码添加新的特性确实很困难,所以这时候重写代码更换技术栈是完全没有问题的,但是你得注意这里的这个缺口。

当你切到一个新的技术栈时,项目就变得复杂了,从一开始就不会有相同的功能特性。

因为在整个系统中整合了很多固有的东西,所以你不能轻易重做。所以你必须意识到,如果你从头开始做某事,那么至少会有一个特性差距。

其他感兴趣的框架

那么还有什么别的框架?还有一些相对关注低一些的,但被炒作的一些框架。

Angular2

谷歌和微软合作开发的框架Angular2,或者说是用微软的
TypeScript
开发的更易管理的Angularjs2。这是什么意思呢?大型公司(一些非技术性的公司)可能会关注Angularjs2,特别是使用了微软的.NET框架的。从去年开始,微软也开始推动.NET的开源工作,使开发者能够更好的使用。

随着Angular2的重写,整个过程旨在能够修改Angular1
app开发存留的一系列问题,目前为止效果明显。Angular2
也会支持 web
组件开发,使其有能力支持更好的展现。而谷歌也认为它是Web开发的未来。

然而,不管Angular团队如何努力的带领开发者从Angular 1 引导向Angular2,
Angular社区对Angular的取舍还是分成两大阵营。重写导致Angular的停滞不前和React逐渐火热,而这个势头正在加剧。

Angular2 能否和 Angular1
当初一样成功,并不能完全肯定,在Javascript社区也众说纷纭。Angular2
还是在Javascript和web开发的”未来”中有成功的可能性,但2016显然不是Angular2,特别是它还是在beta版本。对于那先不喜欢复杂
react app 需要配置很多东东的开发者来说,Angular2 还是可以选择的。

Meteor

Meteor在Github的关注和下载始终是稳固上升中,和React,Angular
的发展相似。这是一款轻量级、全栈式,并有鲜明特征的Javascript框架。很多开发者用它从框架中发现很多新颖有趣的地方。meteor被认为是一款原型式框架,而且对初级开发者非常友善,并且上手较快。

然而,当使用Meteor时又是另一种情况。那些学过 Angular1
或者是一些Rails的开发者都掌握了大量隐藏的魔法技巧,而这也会是阻碍Meteor成为主流的一个原因。

Meteor 不像 React 和 AngularJS, 企业中可能会有一些专业的开发人员,而
Meteor 没有,这也是不被考虑的因素之一。虽然 AngularJS
有很多问题,但有谷歌的技术团队撑腰。而使用 Meteor 不一样,
无论是前后端开发,都会存在很多的技术风险。Meteor要更广泛的被广大开发者使用,还需要解决很多问题。

更别提那些数据库问题,由于 Mongodb 是 Meteor
的默认数据库,而一些开发者对MongoDB的开发模式不是很感兴趣(阅后即焚的小型数据库)。

Meteor运行必须要依赖 SQL,而这点也没有得到很好的支持。

不用说,Meteor
在2016甚至2017年能够占到的份额都会比较少。对于构建大型负载的应用,大部分专业开发者对这个技术,还是持保留意见的。

交互

One use for JavaScript is for animating your layouts

JavaScript作为一门语言,你已经对它有所了解,下一步要了解它如何应用于web,要了解JavaScript是如何与网站交互,你需要知道文档对象模型(Document
Object
Model)

DOM是HTML文档中具体的结构,它是对应于HTML节点的、由JavaScript对象构成的树型结构,更进一步,你可以读一下CSSTricks发表的什么是DOM这篇文章。它对DOM提供了简单直接的描述

Inspecting the dom

JavaScript可以修改DOM元素,这里有一个选择HTML元素并修改它的内容的例子:

var container = document.getElementById(“container”); 
container.innerHTML = 'New Content!';

不要担心,这仅仅是一个简单的例子,你可以通过JavaScript
“DOM操作”做更多的事情。想学习更多关于JavaScript如何与DOM交互的内容,你要通过以下MDN部分的指导,The
Document Object
Model

  • 事件
  • 使用DOM开发web和XML的例子
  • 如何创建一个DOM树
  • DOM简介
  • 使用选择器定位DOM

再次强调,把注意力集中到概念而不是语法上。试着回答以下问题:

  • 什么是DOM?
  • 如何查询元素?
  • 如何添加事件监听者?
  • 如何合适的改变DOM节点属性?

要获得一个通用的JavaScript
DOM操作列表,可以看一下PlainJS提供的JavaScript函数和帮助,这个网站提诸如如何设置HTML元素样式和连接键盘事件监听者等例子,如果你觉得还不够想更深入,你都可以阅读Eloquent
JavaScript中的DOM部分。

  6. Less/Sass/Stylus

 

图片 22

 

有很多人不喜欢CSS.它很容易就达到了1000行的css文件并且不容易被定位和修改。为了解决这些问题,有些语言像Less,
Sass and
Stylus可以编译成CSS文件,并可以使用变量、宏和其它的方式来提高你的编码。你可以一下午就搞定它们中的一种。

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注