Каждый день появляется по новому JavaScript фрeймворку или новой технологии. И каждый день мы задаемся вопросом, как за всем этим успеть? Константин даст Вам серебряную пулю. Вы будете знать, как быстро разобраться в React, PostCss, RxJS, Redux, CycleJs, Angular и даже в неизвестном супер фреймворке. Увидим, что стоит за трендами технологий 2016. Подробнее: https://mavrin.github.io/pres-be-first/#1

1. goo.gl/ePTKan

4. Ideas worth
spreading

5. Немного о себе
Зовут меня Константин Кривленя.
Разработчик в Targetprocess.
Помогаю опенсорсной JavaScript-библиотеки
чартов Taucharts.
Twitter (https://twitter.com/Krivlenia/)
Github (https://github.com/Mavrin/)
Хабр (http://habrahabr.ru/users/mavrin/)

7. #!/bin/bash
# Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
# For licensing, see LICENSE.md or http://ckeditor.com/license
# Build CKEditor using the default settings (and build.js).
set -e
echo "CKBuilder - Builds a release version of ckeditor-dev."
echo ""
CKBUILDER_VERSION="2.3.0"
CKBUILDER_URL="http://download.cksource.com/CKBuilder/$CKBUILDER_VERSION/ckbuilder.jar"
PROGNAME=$(basename $0)
MSG_UPDATE_FAILED="Warning: The attempt to update ckbuilder.jar failed. The existing file will be used
MSG_DOWNLOAD_FAILED="It was not possible to download ckbuilder.jar."
ARGS=" $@ "
function error_exit
{
echo "${PROGNAME}: ${1:-"Unknown Error"}" 1>&2
exit 1
}
function command_exists
{
command -v "$1" > /dev/null 2>&1;
}

8. /* jshint node: true */
'use strict';
const gulp = require( 'gulp' );
const config = {
ROOT_DIR: '.',
BUILD_DIR: 'build',
WORKSPACE_DIR: '..',
// Files ignored by jshint and jscs tasks. Files from .
// gitignore will be added automatically during tasks execution.
IGNORED_FILES: [
'src/lib/**'
]
};
require( './dev/tasks/build/tasks' )( config );
require( './dev/tasks/dev/tasks' )( config );
require( './dev/tasks/lint/tasks' )( config );
require( './dev/tasks/docs/tasks' )( config );
gulp.task( 'default', [ 'build' ] );
gulp.task( 'pre-commit', [ 'lint-staged' ] );

9. module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};

10. {
...
"scripts": {
"pretest": "npm run lint && npm run beautify-lint",
"test": "mocha --harmony --full-trace --check-leaks",
"travis": "npm run cover -- --report lcovonly",
"lint": "eslint lib bin hot",
"beautify-lint": "beautify-lint lib/**.js hot/**.js bin/**.js
"beautify": "beautify-rewrite lib/**.js hot/**.js bin/**.js b
"postcover": "npm run lint && npm run beautify-lint",
"cover": "istanbul cover -x *.runtime.js node_modules/mocha/b
"publish-patch": "npm run lint && npm run beautify-lint && mo
}
}

11. Day 1: Wow, NPM scripts are so much simpler.
Day 2: Moving them into their own js file for readability.
Day 3: I've reinvented Gulp.
5:05 PM ­ 18 Feb 2016
326 467
Jake Archibald
@jaffathecake

12. • Webpack
• Gulp
• Автоматизация для фронтендеров

13. PostCSS

15. Rework

16. PostCSS это не
• CSS preprocessor
• CSS postprocessor
• CSS linter
• CSS minifier

17. PostCSS это инструмент трансформации
CSS с помощью JavaScript

18. #СитникДавайЕще

19. Проблема PostCSS
нет детального
парсинга

20. PostCSS 6.0
c новым парсером
похожим на Babel

22. module.exports = leftpad;
function leftpad (str, len, ch) {
str = String(str);
var i = -1;
if (!ch && ch !== 0) ch = ' ';
len = len - str.length;
while (++i < len) {
str = ch + str;
}
return str;
}

23. Component
inspector

25. Инструментирование
кода

27. Влияние количества пиратов на
глобальное потепление
35000 45000 20000 15000 5000 400 17
Число Пиратов Примерно
13
13.5
14
14.5
15
15.5
16
16.5
Земная Средняя Температура (°C)

29. var chart = new tauCharts.Chart({
data:OscarNominees,
type:'line',
x:'Year',
y:'Runtime',
color:'isWinner',
size:null,
plugins:
[
tauCharts.api.plugins.get('trendline')(),
]
});
chart.renderTo('#container');

30. var plot = new tauCharts.Plot({
...
unit: {
type: "COORDS.RECT",
...,
frames: [
{
units: [
{
...,
type: "COORDS.RECT",
units: [
{
size: "size",
type: "ELEMENT.LINE",
...
}
]
}
]
}
]
}
});

32. import styles from "./style.css";
// import { className } from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';

33. <div class="className_116zl_1">

34. .className {
color: green;
background: red;
}
.otherClassName {
composes: className;
color: yellow;
}

36. <b:isolate/>
<b:style src="./cards-v2.css"/>
<b:style src="./board_units.css"/>
<div class="card" event-click="openView">
<div class="section">
<div class="unit unit_format_max">
<div class="name">{name}</div>
</div>
</div>
</div>

37. <div class="i27__card" event-click="openView">
<div class="i27__section">
<div class="i27__unit i27__unit_format_max">
<div class="i27__name">test</div>
</div>
</div>
</div>

39. V8

40. Fast Property Access

41. Dynamic Machine Code
Generation

42. Efficient Garbage
Collection

43. • Design Elements
• An Efficient Implementation of Self, a Dynamically-Typed Object-Oriented
Language Based on Prototypes
• Efficient implementation of the smalltalk-80 system

44. Redux

46. Идеи Redux
• elm
• Command Query Responsibility Segregation (CQRS)
• Event Sourcing

47. Cycle.js

48. Sources
Sinks
main()
DOM side effects
HTTP side effects
Other side effects
pure dataflow

50. const Cycle = require('@cycle/core');
const {makeDOMDriver, div, button,p} = require('@cycle/dom');
const {Observable} = require('rx');
function main(sources) {
const decrement$ = sources.DOM
.select('.decrement').events('click').map(ev => -1);
const increment$ = sources.DOM
.select('.increment').events('click').map(ev => +1);
const action$ = Observable.merge(decrement$, increment$);
const count$ = action$.startWith(0).scan((x,y) => x+y);
const vtree$ = count$.map(count =>
div([
button('.decrement', 'Decrement'),
button('.increment', 'Increment'),
p('Counter: ' + count)
])
);
return { DOM: vtree$ };
}
const sources = {
DOM: makeDOMDriver('.app')
}
Cycle.run(main, sources);

51. ReactiveX

53. React

57. Проблема React

58. Еще одна
абстракция

59. var MyForm = React.createClass({
onSend: function(e) {
this.props.send()
},
render: function() {
return (
;
<div onKeyDown={this.onSend}>
<Input type="text">
<Button onClick={this.onSend}>Ok</Button>
</div>
)

60. var MyForm = React.createClass({
onSend: function(e) {
this.props.send()
},
render: function() {
return (
;
<form onSubmit={this.onSend}>
<Input type="text">
<Button>Ok</Button>
</form>
)

61. Учите родные API

62. А где же?
• Ember
• Angular
• Angular2
• Мой любимый фреймворк

63. Делитесь идеями

64. Учите идеи

65. Вопросы?

66. Basisjs