Будь первым

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

#!/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;
}

/* 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' ] );

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']);
};

{
...
"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
}
}

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

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

PostCSS это не
• CSS preprocessor
• CSS postprocessor
• CSS linter
• CSS miniﬁer

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

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

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

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;
}

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

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

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');

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

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

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

<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>

Dynamic Machine Code
Generation

• Design Elements
• An Efﬁcient Implementation of Self, a Dynamically-Typed Object-Oriented
Language Based on Prototypes
• Efﬁcient implementation of the smalltalk-80 system

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

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

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

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>
)

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

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

Будь первым

More Related Content

What's hot (20)

Viewers also liked (11)

More from FDConf (20)

Recently uploaded (20)

Будь первым