remove babel.js & spec intro
This commit is contained in:
Ilya Kantor
parent
08aecf8c80
commit
26728a71d0
8 changed files with 0 additions and 201 deletions
|
|
@ -1,57 +0,0 @@
|
|||
|
||||
# The evolution is in progress
|
||||
|
||||
The JavaScript language steadily evolves. The new proposals get analyzed and, if they look worthy, are appended to the list at <https://tc39.github.io/ecma262/> and then progress to the [specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
|
||||
|
||||
Each engine has its own idea about what to implement first. It may implement proposals that are not approved yet and fail to implement things that are already in the spec, because they are less interesting or just harder to do.
|
||||
|
||||
So it's quite common for an engine to implement only the part of the standard.
|
||||
|
||||
A good page to see the current state of support for language features is <https://kangax.github.io/compat-table/es6/> (remember the link to use in the future when you know the language).
|
||||
|
||||
## Babel.JS
|
||||
|
||||
When we use all the modern features of the language, some engines may fail to support such code. Just as it was said, not all features are implemented everywhere.
|
||||
|
||||
Here Babel.JS comes to the rescue.
|
||||
|
||||
[Babel.JS](https://babeljs.io) is a [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler). It rewrites the modern JavaScript code into the previous standard.
|
||||
|
||||
Actually, there are two parts in Babel:
|
||||
|
||||
1. The transpiler program, which rewrites the code.
|
||||
|
||||
The transpiler runs on a developer's computer. It rewrites the code, which is then bundled by a project build system (like [webpack](http://webpack.github.io/) or [brunch](http://brunch.io/)). Most build systems can support Babel easily.
|
||||
|
||||
2. The polyfill.
|
||||
|
||||
For some functions we also need add a special script that should run before our scripts and introduce modern functions that the engine may not support by itself. There's a term "polyfill" for such scripts.
|
||||
|
||||
The two interesting variants are [babel polyfill](https://babeljs.io/docs/usage/polyfill/) that supports a lot, but is big and the [polyfill.io](http://polyfill.io) service that allows to load/construct polyfills on-demand, depending on the features we need.
|
||||
|
||||
The transpiler and/or polyfill may be not needed if we orient towards more-or-less modern engines and don't use rarely supported features.
|
||||
|
||||
## Examples in the tutorial
|
||||
|
||||
```warn header="Browser support is required"
|
||||
Examples that use modern JS will work only if your browser supports it.
|
||||
```
|
||||
|
||||
````online
|
||||
Most examples are runnable at-place, like here:
|
||||
|
||||
```js run
|
||||
alert('Press the "Play" button in the upper-right corner to run');
|
||||
```
|
||||
|
||||
...But if it uses a feature that your browser does not support, an error is shown.
|
||||
|
||||
That doesn't mean that the example is wrong! It's just the browser lacking the support for certain features yet.
|
||||
````
|
||||
|
||||
[Chrome Canary](https://www.google.com/chrome/browser/canary.html) is good for more examples.
|
||||
|
||||
Note that on production we can use Babel to translate the code into suitable for less recent browsers, so there will be no such limitation, the code will run everywhere.
|
||||
|
||||
Now we can go coding, so let's choose a good code editor.
|
||||
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
# Code editors
|
||||
|
||||
The code editor is the place where a programmer spends most his time.
|
||||
|
||||
There are two archetypes: IDE and lightweight editors. Many people feel comfortable choosing one tool of each type.
|
||||
|
||||
[cut]
|
||||
|
||||
## IDE
|
||||
|
||||
The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) is a powerful editor with many additional features that usually operates on a "whole project".
|
||||
|
||||
An IDE loads the project (can be many files), and then allows navigate between files, provides autocompletion based on the whole project, does other "project-level" stuff.
|
||||
|
||||
If you haven't considered selecting an IDE, pleae look at the following variants:
|
||||
|
||||
- IntelliJ editors: [WebStorm](http://www.jetbrains.com/webstorm/) for frontend development and [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/) and other if you need additional languages.
|
||||
- Visual Studio is fine if you're a .NET developer.
|
||||
- Eclipse-based products, like [Aptana](http://www.aptana.com/) and Zend Studio.
|
||||
- [Komodo IDE](http://www.activestate.com/komodo-ide) and it's lightweight free version [Komodo Edit](http://www.activestate.com/komodo-edit).
|
||||
- [Netbeans](http://netbeans.org/)
|
||||
|
||||
All of them with the exception of Visual Studio are cross-platform.
|
||||
|
||||
Most IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you.
|
||||
|
||||
## Lightweight editors
|
||||
|
||||
"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple.
|
||||
|
||||
They are mainly used to instantly open and edit a file.
|
||||
|
||||
The main difference between a "lightweight editor" and an "IDE" is that the latter works on a project-level, meaning it has to load a lot of data to start, and the former one opens just the files. That's much faster.
|
||||
|
||||
In practice, "lightweight" editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE.
|
||||
|
||||
The following options deserve your attention:
|
||||
|
||||
- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware).
|
||||
- [Atom](https://atom.io/) (cross-platform, free).
|
||||
- [Notepad++](http://sourceforge.net/projects/notepad-plus/) (Windows, free).
|
||||
- Vim, Emacs are cool. If you know how to use them.
|
||||
|
||||
## My favorites
|
||||
|
||||
I believe one should have both an IDE for projects and a lightweight editor for quick and easy file editing.
|
||||
|
||||
I'm using:
|
||||
|
||||
- [WebStorm](http://www.jetbrains.com/webstorm/) for JS, and if there is one more language in the project, then I switch to other Jetbrains editors like [PHPStorm](http://www.jetbrains.com/phpstorm/) (PHP), [IDEA](http://www.jetbrains.com/idea/) (Java), [RubyMine](http://www.jetbrains.com/ruby/) (Ruby). There are editors for other languages too, but I didn't use them.
|
||||
- As a lightweight editor -- [Sublime Text](http://www.sublimetext.com).
|
||||
|
||||
If you don't know what to choose -- you can consider these ones.
|
||||
|
||||
## Let's not argue
|
||||
|
||||
The editors in the lists above are those that me or my friends -- good developers use for a long time and are happy with.
|
||||
|
||||
There are other great editors in our big world, please choose the one you like the most.
|
||||
|
||||
The choice of an editor, like any other tool, is individual and depends on your projects, habbits, personal preferences.
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
# Developer console
|
||||
|
||||
And the one more thing before we get down to coding.
|
||||
|
||||
A code is error-prone. You are quite likely to have errors... Oh what I'm talking? You are *absolutely* going to make errors, at least if you're a human, not a [robot]("https://en.wikipedia.org/wiki/Bender_(Futurama)").
|
||||
|
||||
But in the browser, a user doesn't see the errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it.
|
||||
|
||||
To see errors and get a lot of other useful information about scripts, browsers have embedded "developer tools".
|
||||
|
||||
**It is recommended to use Chrome or Firefox for the development.**
|
||||
|
||||
Other browsers also provide developer tools, but are usually in a "catching-up" position, compared to Chrome/Firefox which are the best.
|
||||
|
||||
If there is an error in the certain browser only, then we can use it's developer tools, but usually -- Chrome/Firefox.
|
||||
|
||||
Developer tools are really powerful, there are many features. On this stage let's just look how to open them, look at errors and run JavaScript commands.
|
||||
|
||||
[cut]
|
||||
|
||||
## Google Chrome
|
||||
|
||||
Open the page [bug.html](bug.html).
|
||||
|
||||
There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it.
|
||||
|
||||
Press the key `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
|
||||
|
||||
The developer tools will open on the Console tab by default.
|
||||
|
||||
It looks somewhat like this:
|
||||
|
||||
|
||||
|
||||
The exact look depends on your Chrome version. It changes from time to time, but should be similar.
|
||||
|
||||
- Here we can see the red-colored error message. In this case the script contains a "lalala" command, which was put there just because it is unknown.
|
||||
- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occured.
|
||||
|
||||
Below the error message there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands and press enter to run them (`key:Shift+Enter` to input multiline commands).
|
||||
|
||||
Now we can see errors and that's enough for the start. We'll be back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.
|
||||
|
||||
|
||||
## Firefox, Edge and others
|
||||
|
||||
Most other browsers use `key:F12` to open developer tools.
|
||||
|
||||
The look & feel of them is quite similar, once we know how to use one of them (can start with Chrome), can easily switch to another.
|
||||
|
||||
## Safari
|
||||
|
||||
Safari (if you use Mac, not Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
|
||||
|
||||
There's a checkbox for that at the bottom of the "Advanced" pane of the preferences:
|
||||
|
||||
|
||||
|
||||
Now `key:Cmd+Opt+C` can toggle the console. Also note that the new top menu item has appeared with many useful options.
|
||||
|
||||
## Summary
|
||||
|
||||
- Developer tools allow us to see errors, run commands, examine variables and much more.
|
||||
- They can be opened with `key:F12` for most browsers under Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).
|
||||
|
||||
Now we have the environment ready. In the next section we get down to JavaScript.
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
There is an error in the script on this page.
|
||||
<script>
|
||||
lalala
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 285 KiB |
Loading…
Add table
Add a link
Reference in a new issue