入门教程,开荒很疯狂

为啥做 JS 开发很疯狂???

2016/06/08 · JavaScript · 2 评论 · 开发

本文由 伯乐在线 - 小谢 翻译,cotton 校稿。未经许可,禁止转载!
英文出处:sfioritto。欢迎加入翻译组。

Web开发时很有趣的~但是Javascript确是……令人生畏的。

Web开发中其他一切对你而言都是很简单的,但是当你深入探究Javascript的时候,就会有一种“众人皆醒你独醉”的感觉,好像你不知道其他人都知道的一些重要的基础知识内容,并且这些内容可以帮助你理解所有知识。

事实是,的确如此,你遗漏了一些解决问题的重要片段。

并且,前端开发确实已经进入了疯狂的状态了。

不仅仅是你。

拉过一把椅子,坐下来。是到开始写Javascript应用的时间了。

第一步是搭建本地开发环境并跑通它。那么是使用 Gulp?还是 Grunt?等等,好……好像还有 NPM script!

WebPACK?还是 Browserify? (羞涩的)Require.js?升级到 ES6?或者为你的项目添加 Babel 支持?

BDD 还是常规的单元测试?应该使用什么断言框架?从命令行运行测试显然很棒,所以 PhantomJS 也是不错的选择?

Angular 还是 React?还是 Ember?再或者 Backbone?

你看了一些 React 文档,“Redux 是一种为 Javascript 应用提供的可预测状态的容器。”酷毙了!你肯定需要其中的一个。

为什么构建 Javascript 应用会如此疯狂?!?

让我来告诉你为什么这一切是如此疯狂。让我们从一个例子开始,后面会有漂亮的图片。

这是 React 的“Hello, world!”应用。

JavaScript

// main.js var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );

1
2
3
4
5
6
7
8
// main.js
var React = require('react');
var ReactDOM = require('react-dom');
 
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
  );

Not quite done. 不止这些。

Shell

$ npm install --save react react-dom babelify babel-preset-react $ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

1
2
$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

实际上这里还缺了几个步骤,例如安装 browserify,以及在你做好之后还要让它运行在网页上,因为这其实不会直接产生一个能有什么内容的网页。 ¯ (ツ)

在完成这些之后,你最后还需要一个名为 bundle.js 的文件,这个文件包含新的 React Hello World 应用程序,这个程序有 19374 行代码。而你只需要安装 browserify、babelify 和 react-dom 即可,它们会帮你生成成千上万行的你不了解的代码,想想吧。

所以基本上是像下面这样的:

JavaScript

Marc was almost ready to implement his "hello world" React app pic.twitter.com/ptdg4yteF1 — Thomas Fuchs (@thomasfuchs) March 12, 2016

1
2
3
Marc was almost ready to implement his "hello world" React app pic.twitter.com/ptdg4yteF1
— Thomas Fuchs (@thomasfuchs) March 12, 2016
 

好,下面就让我们用简单的 Javascipt 代码写一个 Hello World 应用。

XHTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Hello World</title> </head> <body> <div id="container"></div> <script> document.body.onload = function(){ var container = document.getElementById("container"); container.innerHTML = '<h1>"Hello, world!"</h1>'; } </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hello World</title>
  </head>
 
  <body>
    <div id="container"></div>
    <script>
     document.body.onload = function(){
       var container = document.getElementById("container");
       container.innerHTML = '<h1>"Hello, world!"</h1>';
     }
    </script>
  </body>
  </html>

这就成了。一共 18 行代码。你可以复制/粘贴到 index.html 文件中,双击把它加载到你的浏览器中。搞定。

此时你肯定会说:“等等,React 能做的事情比你刚刚写的这个小玩意更多,并且你不可能用那种方式写一个 Javascript 应用!”(大多数情况下)你是对的,但你还需要走一小步才能理解为什么一切都疯了。

下面是我承诺过的图片。

图片 1

绝大多数你开发的Javascript web应用程序,会落在钟形曲线中部的某个位置。一定会在中间部分,如果你从一个完整的 React 堆栈开始,那么从一开始你就过度设计了你的应用程序。

这就是为什么一切都变得疯狂。其中的大多数工具你觉得是你解决问题所必须具备的,但是你一直没有碰到这样的问题,而且以后你永远也不会碰到

同一张图片:

图片 2

因为在默认情况下,每个人都过度设计他们的应用,他们却意识不到这一点,使得 Javascript 的开发状态变得过于繁冗。

你应该如何启动 Javascript 应用程序呢?是否应该使用一些类似 React 或 Angular 的工具?是否应该使用软件包管理器?如果你不这样做,你应该做什么?测试有必要吗?是否应该用 Javascript 生成标志?所有这些都是你应该好好问问自己的问题,在启动默认的庞大的技术堆栈之前。

当你启动一个 Javascript 应用程序时,关键是要在钟形曲线上挑一个点,这个点刚好位于你认为这个应用最终可能会到达的复杂程度的前面。

我不会撒谎,验证这一切需要经验。但是这里有一个不错的点可以让你启动大多数的 Javascript 应用程序:jQuery 加上客户端模板,以及用于连接和缩减产品文件超级简单的构建工具(假如你的后端架构还没有这样做的话)。

如果你知道如何正确地构建 Javascript 应用程序,那么你就会开始懂得怎样、何时以及为什么使用框架或 npm/requir/webPack 或 ES6,什么时候编写测试,什么时候应该费心让你的测试本地运行,什么时候运行在浏览器中,所有这些问题都会搞定。

有兴趣用你的 Javascript 开发知识填补那些空白?想要避免不堪重负的感觉?想要避免在这个开发过程中过度设计你的 Javascript 应用程序?那是我下个月将要专注讨论的内容,所以,敬请期待,在一两周后会有更多干货到来!

打赏支持我翻译更多好文章,谢谢!

打赏译者

JSFiddle

【编者按】本文作者为 Sean Fioritto,主要阐述了 JavaScript 开发为何让人有些无从下手的根本原因。文章系国内 ITOM 管理平台 OneAPM 编译呈现。

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 3 图片 4

3 赞 4 收藏 2 评论

开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds:

网络开发乐趣多多!Javascript 却……让人望而却步。

关于作者:小谢

图片 5

懒懒的程序员~ 个人主页 · 我的文章 · 24 ·  

图片 6

React JSFiddle

网页开发的其他所有东西都很配合,唯独到了 Javascript,你会感觉好像比别人少了一大块基础知识,完全搞不懂它。

React JSFiddle without JSX

事实就是,没错,你的确缺了几块拼图。

通过 npm 使用 React

不过,前端开发的现状其实也很疯狂。

我们建议在 React 中使用 CommonJS 模块系统,比如browserify或webpack。使用react和react-domnpm 包.

并不是只有你感到抓狂。

拉把椅子坐下来。该写个 Javascript 应用了。

首先要搭建和运行本地环境。是用 Gulp,还是 Grunt,都不好……还是用 NPM 脚本吧!

Webpack 还是 Browserify?(不好意思地)还是 Require.js?要升级到 ES6 吗?在预处理中加入 Babel 是不是太过了?

行为驱动开发还是常规的单元测试?应该选用哪种断言框架?如果能从命令行运行测试当然是好事,那何不试试 PhantomJS?

Angular 还是 React?Ember 呢?Backbone 怎么样?

有些 React 文档写道:“Redux 是 JavaScript 应用可预见的状态容器。”太棒了!你肯定需要来一个。

// main.jsvarReact=require('react');varReactDOM=require('react-dom');ReactDOM.render(

为什么搭建 Javascript 应用会这么疯狂?!

让笔者来帮你弄明白为什么这些看起来都这么疯狂。首先看个例子,然后再看漂亮的图片。

以下是 React 的“Hello, world!”应用。

// main.js
var React = require('react');

var ReactDOM = require('react-dom');

ReactDOM.render(

  <h1>Hello, world!</h1>,

  document.getElementById('example')

  );

这还没完。

$ npm install --save react react-dom babelify babel-preset-react

$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

其实中间缺了几个步骤,比如说安装 browserify,还有完成这些之后还要做什么,才能让它在网页上运行,因为仅仅这些并不能生成一个有用的网页。

完成这些之后,会得到一个名为 bundle.js 的文件,里面就是新的 React Hello World 应用,包含 19374 行代码。接下来,只需要安装 browserify、 babelify 和 react-dom,然后衡量未知的成千上万条代码。

基本上就是这样……

现在用基本的 Javascript 来写一个 hello world 应用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hello World</title>
  </head>

  <body>
    <div id="container"></div>
    <script>
     document.body.onload = function(){
       var container = document.getElementById("container");
       container.innerHTML = '<h1>"Hello, world!"</h1>';
     }
    </script>
  </body>
  </html>

这就是全部内容。18行代码。你可以把它们复制、粘贴到一个叫 index.html 的文件,双击加载到你的浏览器。好了。

如果此刻你对自己说:“但是,等一下,React 能做的可不止你刚才写的那点儿小东西,你不能那么写 Javascript!”这话(大部分)是正确的,你很快就会发现为什么所有东西都这么疯狂了。

Hello,world!

,document.getElementById('example'));

要用 browserify 安装 React DOM 和构建你的包。

$npm install --save react react-dom babelify babel-preset-react$browserify -t[babelify --presets[react]]main.js -o bundle.js

要用 webpack 安装 React DOM 和构建你的包:

$npm install --save react react-dom babel-preset-react$webpack

注意:

如果你正在使用 ES2015, 你将要使用babel-preset-es2015包.

注意:默认情况下,React 将会在开发模式,很缓慢,不建议用于生产。要在生产模式下使用 React,设置环境变量NODE_ENV为production(使用 envify 或者 webpack's DefinePlugin)。例如:

newwebpack.DefinePlugin({"process.env":{NODE_ENV:JSON.stringify("production")}});

不用 npm 的快速开始

如果你现在还没准备要使用npm,你可以下载这个已经包含了预构建的 React 和 React DOM 拷贝的入门套件.

下载入门套件 15.3.1

在入门教程包的根目录,创建一个含有如下代码的helloworld.html。

Hello React!ReactDOM.render(

现在可以看到笔者提到的图片了。

图片 7

为何说 JavaScript 开发很疯狂

你要创建的 Javascript 网页应用基本上都会出现在钟形曲线中间的某个位置。在中间位置,如果一开始你用了 React 全栈,那么你的应用从一开始就极大地违背了设计标准。

这就是为什么所有东西都很疯狂。你以为你必须使用的工具大部分都是为了解决现在未出现,或者永远都不会出现的问题

Hello,world!

,document.getElementById('example'));

在 JavaScript 代码里写着 XML 格式的代码称为 JSX;可以去JSX 语法里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript,我们用标签,并引入 Babel 来完成在浏览器里的代码转换。在浏览器里打开这个html,你应该可以看到成功的消息!

分离文件

你的 React JSX 代码文件可以写在另外的文件里。新建下面的src/helloworld.js。

ReactDOM.render(

再看一下这张图:

图片 8

为何说 JavaScript 开发很疯狂

Javascript 开发现状让人无措又迷惑,因为所有人并没有意识到,在默认状态下,他们的应用已经违背了设计标准。

你该如何开始搭建 Javascript 应用?你应该用 React 或 Angular 这样的工具吗?要是不用该怎么办?测试到底有没有必要?还要用 Javascript 生成标记吗?在开始搭建默认的庞大技术堆栈之前,这些都是你应该回答的问题。开始开发 Javascript 应用时,关键在于在钟形曲线上选取一个点,作为你的应用最终复杂程度的上限。

坦白说,要实现这一点需要经验。不过还是有很多 Javascript 应用可以借鉴的出发点的:Jquery 加上客户端模板,还有一个非常简单的构造工具,用来连接和减少生产文件(假设你的后台框架还没有这项功能)。

如果你了解了如何正确构造 Javascript 应用,你就会逐渐明白如何、何时以及为什么要使用框架、npm、require、webpack 或 es6,何时要写测试,何时应该在本地测试,何时应该在浏览器测试,以及其他会出现的问题和麻烦。

本文系 OneAPM 工程师编译呈现。OneAPM Browser Insight 是一个基于真实用户的 Web 前端性能监控平台,能够帮大家定位网站性能瓶颈,网站加速效果可视化;支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。想阅读更多技术文章,请访问 OneAPM 官方技术博客。

本文转自 OneAPM 官方博客

原文地址: http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/

Hello,world!

,document.getElementById('example'));

然后在helloworld.html引用该文件:

注意一些浏览器(比如 Chrome )会在使用 HTTP 以外的协议加载文件时失败。

离线转换

先安装Babel命令行工具(需要npm):

npm install --global babel-cli

npm install babel-preset-react

然后把你的src/helloworld.js文件转成标准的 JavaScript:

babel --presets react src --watch --out-dir build

注意:

如果你正在使用 ES2015, 你将需要使用babel-preset-es2015包.

build/helloworld.js会在你对文件进行修改时自动生成。 阅读Babel CLI 文档了解高级用法。

ReactDOM.render(React.createElement('h1',null,'Hello, world!'),document.getElementById('example'));

对照下面更新你的 HTML 代码

Hello React!

下一步

去看看入门教程和入门教程包examples目录下的其它例子学习更多。

我们还有一个社区开发者共建的 Wiki:workflows, UI-components, routing, data management etc.

恭喜你,欢迎来到 React 的世界。

本文由星彩网app下载发布于前端技术,转载请注明出处:入门教程,开荒很疯狂

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。