Interesting aspects of the development of JavaScript and web technologies in 2013
Good day to all!
After analyzing a lot of blogs, reports, presentations, visiting a couple of conferences and talking to them with web developers of different profiles, I identified for myself the main areas of JavaScript-development, which are actively developing or are just starting to develop (and, in my opinion, they should pay attention to familiarize). The purpose of the article is to highlight them, and give food for thought about exactly how the knowledge gained could be applied in practice.
My name is Mikhail Krishtopa, I work as a coder (html / css / js) and a plone- developer at ameria . As part of the self-education program, time was spent studying the main trends in the development and use of the JavaScript language, which I want to share in this report. It is quite possible that experienced developers flip through my review with a smile, but in my heart I hope that it will be interesting to someone to get acquainted with the resulting material (especially if the reader did not have a “finger on the pulse” in this industry). As a whole, I didn’t have a task to reveal all the depth of each technology, I just give a brief description plus my opinion about it.
')
This is my first "attempt at writing" on Habré, please do not shoot a musician - he plays as best he can. So...
In the first place is to highlight the trend of using JavaScript to develop applications on the client (browser), and on the server. A few years ago it was exotic, but now there is a rich choice of frameworks for development, and it looks like it has come a long time. Such a combination has advantages - it is not necessary to know separately the server and separately the client language, here is just the case when “two-in-one”.
Among the most famous are NodeJS, AngularJS (Google is actively promoted and used), KnockoutJS, BackBone.js, Meteor, PhantomJS. I note that all of them are actively developing, and every day for each of them enthusiasts produce many modules. Naturally, all this is OpenSource.
Brendan Eich developed JavaScript under tight time pressure, the language was developed in 10 days (“10 days to make a lexer, a parser, a bytecode emitter compiler, an interpreter, built-in classes and a decompiler”). Perhaps that is why many developers do not like its syntax, constructions and many features. For example, there are no classes in the language, in their usual sense, a rather unusual inheritance mechanism, etc.
Developed as an “add-on” over JavaScript, it is essentially a new language, the purpose of which is to facilitate JavaScript development, remove the routine and add simplicity and speed to the process of writing code. Compiled into javascript. It is possible to debug in the browser compiled applications via Source Map. The syntax is similar to Ruby. On average, for the same actions when using coffeScript, it takes 2 times less lines than on pure JavaScript.
A programming language introduced by Microsoft in 2012 and positioned as a web application development tool that enhances JavaScript. Also compiled into javascript with which it is backward compatible. Released under OpenSource.
TypeScript differs from JavaScript by the ability to explicitly define types (static typing), support for using full-fledged classes (as in traditional object-oriented languages), and support for connecting modules. In theory, such innovations should increase development speed, readability, refactoring and code reuse, search for errors during the development and compilation stages, as well as speed of program execution.
Google decided not to waste time on trifles, and created a “new language for the web” fromscratch , with blackjack with a low threshold of entry and classes. Dart is positioned as a substitute / alternative to JavaScript, suffering from "fundamental" flaws that cannot be fixed by evolutionary development. It is compiled into JavaScript, but can be launched in a special browser Dartium (clone Chromium, with an added virtual machine for Dart). There is an editor for the language, there are plugins for the main editors.
Not JavaScript, but is directly related to the things described below. With the receipt of this tool from the set of HTML5-tags, the hands of the developers literally became untied - it became possible to display any graphics on the browser page, including those created dynamically (previously, this could only be done in Flash). This gave a strong impetus to the development of libraries working with 2D and 3D graphics. Examples will be below.
WebGL (Web-based Graphics Library) is a software library for JavaScript that allows you to create interactive 3D graphics that operate in a wide range of compatible web browsers. Due to the use of OpenGL low-level support tools, a part of the WebGL code can be run directly on video cards.
Although, in my opinion, the technology has not really arrived, but in one way or another it is supported by all modern browsers. When the issue of security is resolved and mobile devices start supporting it, it will bloom in full color. And this means that various multiplayer games in each phone and tablet are not lit up with complex 3D graphics.
Easy and cross-browser library for working in three-dimensional graphics. You MUST see this in order to understand where the Web is heading:
A separate line is the idea of ​​using JavaScript as an “assembler” for the browser. By itself, JavaScript is a language, to put it mildly, not fast (at least it was that way until the developers of V8 from Google Chrome took it).
The developers of asm.js created a subset of the language from which they excluded various “inhibiting” components, added strict typing, etc. The resulting dialect works many times faster than regular JavaScript, and besides, browser manufacturers are starting to develop separate compilers. Already, the use of asm.js gives us 50% of the speed of a normal C application. And this is really very cool.
But asm.js itself doesn’t mean as much as in conjunction with the Emscripten compiler, which allows you to "overtake" the code written in C / C ++ in asm.js. Naturally, the resulting JavaScript is not readable, but this is not required of it.
As an example, in just 4 days a project like the Unreal Engine 3 was transferred to the web. How it looks is worth seeing the demo: http://www.unrealengine.com/html5/ (fascinating, especially when you realize that IT works in a browser ).
A little away from the graphic part, I want to draw attention to the ubiquitous use of developers such libraries as JSHint, JSLint.
JSLint scans javascript code. If he finds a problem, then returns a message with a description, and a location in the code. The problem is not necessarily a syntax error, although it often is. JSLint also draws attention to coding conventions and problems in structure.
“Before you commit the code, run it through JSLint to check for errors that you may have overlooked.”
There are modules for checking the code for the main editors, but in the simplest case an online check service will help.
Solving the JavaScript single-threading problem. Separately running background processes (like "daemons" on unix-systems), in which you can perform some calculations, server requests, etc. A worker can be accessed from the main process and get some answer with the result.
I would like to mention the library JS Doc 3. Generates API documentation from the comments in the project code.
Covering the application with tests is a good practice, not only in JavaScript. But just in it already there is also a wide enough choice of frameworks for testing, for every taste and color:
"Grunt is a task-based command line build tool for JavaScript projects."
One word: "automation". A toolkit, written in JavaScript, for working on a project with a modular architecture, which allows you to simplify work with code, taking on the automation functions of various routine operations: checking the JSHint code, compiling from SASS or CoffeeScript, etc.). Thanks to the modular architecture, with the help of many plug-ins written by enthusiasts, a wide functionality is implemented that makes life easier for the developer.
As a simple example, you can consider the grunt-micro plugin, which, when building a project, will notify you that the size of a specific library after assembly and minimization is greater than the limit set by the specification, and something needs to be shortened :).
Sandboxes that allow you to try (or write) a piece of code without creating a page for the experiment. In a matter of minutes, you can try out a new idea, share an example with another developer, or work together on a piece of the page. Choice of connected JS frameworks, history of changes, code quality control (JSLint) and other “buns”.
"Mozilla teams up for javascript video codec that eliminates the need for plug-ins (ORBX.js)". Video codec running on JavaScript and WebGL. And this is really cool. View HD-video without codec, browser, on pure JS. No need for plugins, no problems with formats. Adaptive bitrate, 25% better compression compared to H.264, and a long list of benefits.
Audio codec. It allows you to play MP3, Apple Lossless, FLAC, and AAC even in browsers that do not support these formats.
Delicious - finally. A technology that allows the script to track the position of the user's head through a webcam. The head can be used in different ways - you can think about it, you can eat it. It can also be used for management. Anything, although unaccustomed neck will hurt.
A vivid example is the game FaceKat (checked in Chrome). We pierce the primordial universal chaos, dodging the circles flying in the forehead through intensive head-winding. Good workout for the neck, by the way.
Another interesting example is the opportunity to turn your head, looking at the perspective and looking at the foreground objects - http://auduno.imtqy.com/headtrackr/examples/targets.html . In this embodiment, it is of little use, but as an idea for a store, completely.
An example of how this technology can be used in conjunction with Google Street View: http://alexhancock.imtqy.com/street-facing/ .
The module itself is called “headtrackr”: https://github.com/auduno/headtrackr .
Further development of technology - management of virtual objects. An example on badassjs.com/post/44786596458/an-iron-man-like-3d-hologram-controlled-by-leap-motion shows how using JavaScript and LeapMotion device for $ 80 you can twist a hologram of a virtual Earth with your finger. Just like Tony Stark.
At the end of this opus, I hope that is not too tired. I would also like to hear an opinion about the article, and about the missed points, or inaccuracies. Well, if someone really wants, then you can smash a tomato - if only it wouldhurt the cause ...;)
After analyzing a lot of blogs, reports, presentations, visiting a couple of conferences and talking to them with web developers of different profiles, I identified for myself the main areas of JavaScript-development, which are actively developing or are just starting to develop (and, in my opinion, they should pay attention to familiarize). The purpose of the article is to highlight them, and give food for thought about exactly how the knowledge gained could be applied in practice.
My name is Mikhail Krishtopa, I work as a coder (html / css / js) and a plone- developer at ameria . As part of the self-education program, time was spent studying the main trends in the development and use of the JavaScript language, which I want to share in this report. It is quite possible that experienced developers flip through my review with a smile, but in my heart I hope that it will be interesting to someone to get acquainted with the resulting material (especially if the reader did not have a “finger on the pulse” in this industry). As a whole, I didn’t have a task to reveal all the depth of each technology, I just give a brief description plus my opinion about it.
')
This is my first "attempt at writing" on Habré, please do not shoot a musician - he plays as best he can. So...
One language for client and server
In the first place is to highlight the trend of using JavaScript to develop applications on the client (browser), and on the server. A few years ago it was exotic, but now there is a rich choice of frameworks for development, and it looks like it has come a long time. Such a combination has advantages - it is not necessary to know separately the server and separately the client language, here is just the case when “two-in-one”.
Among the most famous are NodeJS, AngularJS (Google is actively promoted and used), KnockoutJS, BackBone.js, Meteor, PhantomJS. I note that all of them are actively developing, and every day for each of them enthusiasts produce many modules. Naturally, all this is OpenSource.
"Syntactic sugar"
Brendan Eich developed JavaScript under tight time pressure, the language was developed in 10 days (“10 days to make a lexer, a parser, a bytecode emitter compiler, an interpreter, built-in classes and a decompiler”). Perhaps that is why many developers do not like its syntax, constructions and many features. For example, there are no classes in the language, in their usual sense, a rather unusual inheritance mechanism, etc.
CoffeeScript
Developed as an “add-on” over JavaScript, it is essentially a new language, the purpose of which is to facilitate JavaScript development, remove the routine and add simplicity and speed to the process of writing code. Compiled into javascript. It is possible to debug in the browser compiled applications via Source Map. The syntax is similar to Ruby. On average, for the same actions when using coffeScript, it takes 2 times less lines than on pure JavaScript.
TypeScript
A programming language introduced by Microsoft in 2012 and positioned as a web application development tool that enhances JavaScript. Also compiled into javascript with which it is backward compatible. Released under OpenSource.
TypeScript differs from JavaScript by the ability to explicitly define types (static typing), support for using full-fledged classes (as in traditional object-oriented languages), and support for connecting modules. In theory, such innovations should increase development speed, readability, refactoring and code reuse, search for errors during the development and compilation stages, as well as speed of program execution.
Dart
Google decided not to waste time on trifles, and created a “new language for the web” from
HTML5-tag "Canvas"
Not JavaScript, but is directly related to the things described below. With the receipt of this tool from the set of HTML5-tags, the hands of the developers literally became untied - it became possible to display any graphics on the browser page, including those created dynamically (previously, this could only be done in Flash). This gave a strong impetus to the development of libraries working with 2D and 3D graphics. Examples will be below.
Webgl
WebGL (Web-based Graphics Library) is a software library for JavaScript that allows you to create interactive 3D graphics that operate in a wide range of compatible web browsers. Due to the use of OpenGL low-level support tools, a part of the WebGL code can be run directly on video cards.
Although, in my opinion, the technology has not really arrived, but in one way or another it is supported by all modern browsers. When the issue of security is resolved and mobile devices start supporting it, it will bloom in full color. And this means that various multiplayer games in each phone and tablet are not lit up with complex 3D graphics.
three.js
Easy and cross-browser library for working in three-dimensional graphics. You MUST see this in order to understand where the Web is heading:
- To motorists, must see:
http://threejs.org/examples/webgl_materials_cars.html (FireFox, Chrome) - Drawing a person in the browser? No problems:
http://threejs.org/examples/webgl_materials_normalmap2.html
http://threejs.org/examples/webgl_loader_json_objconverter.html
http://threejs.org/examples/webgl_loader_ctm.html - Procedural texture generation:
http://threejs.org/examples/webgl_terrain_dynamic.html - An art project that is difficult to attribute to any particular kind of art (either an interactive film, or a delusion of a madman, or a new art form):
http://www.ro.me/ (Chrome only)
asm.js (from Mozilla) + Emscripten
A separate line is the idea of ​​using JavaScript as an “assembler” for the browser. By itself, JavaScript is a language, to put it mildly, not fast (at least it was that way until the developers of V8 from Google Chrome took it).
The developers of asm.js created a subset of the language from which they excluded various “inhibiting” components, added strict typing, etc. The resulting dialect works many times faster than regular JavaScript, and besides, browser manufacturers are starting to develop separate compilers. Already, the use of asm.js gives us 50% of the speed of a normal C application. And this is really very cool.
But asm.js itself doesn’t mean as much as in conjunction with the Emscripten compiler, which allows you to "overtake" the code written in C / C ++ in asm.js. Naturally, the resulting JavaScript is not readable, but this is not required of it.
As an example, in just 4 days a project like the Unreal Engine 3 was transferred to the web. How it looks is worth seeing the demo: http://www.unrealengine.com/html5/ (fascinating, especially when you realize that IT works in a browser ).
Code Quality Control
A little away from the graphic part, I want to draw attention to the ubiquitous use of developers such libraries as JSHint, JSLint.
JSLint scans javascript code. If he finds a problem, then returns a message with a description, and a location in the code. The problem is not necessarily a syntax error, although it often is. JSLint also draws attention to coding conventions and problems in structure.
“Before you commit the code, run it through JSLint to check for errors that you may have overlooked.”
There are modules for checking the code for the main editors, but in the simplest case an online check service will help.
Web Workers
Solving the JavaScript single-threading problem. Separately running background processes (like "daemons" on unix-systems), in which you can perform some calculations, server requests, etc. A worker can be accessed from the main process and get some answer with the result.
Documenting code
I would like to mention the library JS Doc 3. Generates API documentation from the comments in the project code.
- http://usejsdoc.org/ - documentation
- https://github.com/jsdoc3/jsdoc
Testing
Covering the application with tests is a good practice, not only in JavaScript. But just in it already there is also a wide enough choice of frameworks for testing, for every taste and color:
- Mocha: http://visionmedia.github.com/mocha/
- qUnit: http://qunitjs.com - jQuery unit testing framework
- Jasmine: http://pivotal.imtqy.com/jasmine/
- Google JS Test: http://code.google.com/p/google-js-test/
- Karma: http://karma-runner.imtqy.com/0.8/index.html
Grunt: The JavaScript Task Runner
"Grunt is a task-based command line build tool for JavaScript projects."
One word: "automation". A toolkit, written in JavaScript, for working on a project with a modular architecture, which allows you to simplify work with code, taking on the automation functions of various routine operations: checking the JSHint code, compiling from SASS or CoffeeScript, etc.). Thanks to the modular architecture, with the help of many plug-ins written by enthusiasts, a wide functionality is implemented that makes life easier for the developer.
As a simple example, you can consider the grunt-micro plugin, which, when building a project, will notify you that the size of a specific library after assembly and minimization is greater than the limit set by the specification, and something needs to be shortened :).
Js shells
Sandboxes that allow you to try (or write) a piece of code without creating a page for the experiment. In a matter of minutes, you can try out a new idea, share an example with another developer, or work together on a piece of the page. Choice of connected JS frameworks, history of changes, code quality control (JSLint) and other “buns”.
- http://jsbin.com
- http://jsfiddle.net/
- http://codepen.io/
- http://jsperf.com - specialized in evaluating code performance
JS Video Codec
"Mozilla teams up for javascript video codec that eliminates the need for plug-ins (ORBX.js)". Video codec running on JavaScript and WebGL. And this is really cool. View HD-video without codec, browser, on pure JS. No need for plugins, no problems with formats. Adaptive bitrate, 25% better compression compared to H.264, and a long list of benefits.
Js audio codec
Audio codec. It allows you to play MP3, Apple Lossless, FLAC, and AAC even in browsers that do not support these formats.
Head tracking
Delicious - finally. A technology that allows the script to track the position of the user's head through a webcam. The head can be used in different ways - you can think about it, you can eat it. It can also be used for management. Anything, although unaccustomed neck will hurt.
A vivid example is the game FaceKat (checked in Chrome). We pierce the primordial universal chaos, dodging the circles flying in the forehead through intensive head-winding. Good workout for the neck, by the way.
Another interesting example is the opportunity to turn your head, looking at the perspective and looking at the foreground objects - http://auduno.imtqy.com/headtrackr/examples/targets.html . In this embodiment, it is of little use, but as an idea for a store, completely.
An example of how this technology can be used in conjunction with Google Street View: http://alexhancock.imtqy.com/street-facing/ .
The module itself is called “headtrackr”: https://github.com/auduno/headtrackr .
Further development of technology - management of virtual objects. An example on badassjs.com/post/44786596458/an-iron-man-like-3d-hologram-controlled-by-leap-motion shows how using JavaScript and LeapMotion device for $ 80 you can twist a hologram of a virtual Earth with your finger. Just like Tony Stark.
Conclusion
At the end of this opus, I hope that is not too tired. I would also like to hear an opinion about the article, and about the missed points, or inaccuracies. Well, if someone really wants, then you can smash a tomato - if only it would
Source: https://habr.com/ru/post/185970/
All Articles