Будь первым

Константин Кривленя

Компания Targetprocess

goo.gl/ePTKan

TED
TED

Ideas worth spreading

Немного о себе

Зовут меня Константин Кривленя.
Разработчик в 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;
}

# Move to the script directory.
cd $(dirname $0)

# Download/update ckbuilder.jar.
mkdir -p ckbuilder/$CKBUILDER_VERSION
cd ckbuilder/$CKBUILDER_VERSION
if [ -f ckbuilder.jar ]; then
	echo "Checking/Updating CKBuilder..."
	if command_exists curl ; then
	curl -O -R -z ckbuilder.jar $CKBUILDER_URL || echo "$MSG_UPDATE_FAILED"
	else
	wget -N $CKBUILDER_URL || echo "$MSG_UPDATE_FAILED"
	fi
else
	echo "Downloading CKBuilder..."
	if command_exists curl ; then
	curl -O -R $CKBUILDER_URL || error_exit "$MSG_DOWNLOAD_FAILED"
	else
	wget -N $CKBUILDER_URL || error_exit "$MSG_DOWNLOAD_FAILED"
	fi
fi
cd ../..

# Run the builder.
echo ""
echo "Starting CKBuilder..."

JAVA_ARGS=${ARGS// -t / } # Remove -t from args.

VERSION="4.5.9 DEV"
REVISION=$(git rev-parse --verify --short HEAD)
SEMVER_REGEX="^([0-9]+)\.([0-9]+)\.([0-9]+)(\-[0-9A-Za-z-]+)?(\+[0-9A-Za-z-]+)?$"

# Get version number from tag (if available and follows semantic versioning principles).
# Use 2>/dev/null to block "fatal: no tag exactly matches", true is needed because of "set -e".
TAG=$(git symbolic-ref -q --short HEAD || git describe --tags --exact-match 2>/dev/null) || true
# "Git Bash" does not support regular expressions.
if echo $TAG | grep -E "$SEMVER_REGEX" > /dev/null
then
	echo "Setting version to $TAG"
	VERSION=$TAG
fi

java -jar ckbuilder/$CKBUILDER_VERSION/ckbuilder.jar --build ../../ release $JAVA_ARGS --version="$VERSION" --revision="$REVISION" --overwrite

# Copy and build tests.
if [[ "$ARGS" == *\ \-t\ * ]]; then
	echo ""
	echo "Copying tests..."

	cp -r ../../tests release/ckeditor/tests
	cp -r ../../package.json release/ckeditor/package.json
	cp -r ../../bender.js release/ckeditor/bender.js

	echo ""
	echo "Installing tests..."

	(cd release/ckeditor &&	npm install && bender init)
fi

echo ""
echo "Release created in the \"release\" directory."
		
	
		
/* 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 benchmark/*.js test/*.js",
    "beautify": "beautify-rewrite lib/**.js hot/**.js bin/**.js benchmark/*.js test/*.js",
    "postcover": "npm run lint && npm run beautify-lint",
    "cover": "istanbul cover -x *.runtime.js node_modules/mocha/bin/_mocha",
    "publish-patch": "npm run lint && npm run beautify-lint && mocha && npm version patch && git push && git push --tags && npm publish"
  }
}
		
	

PostCSS

Rework

PostCSS это не

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

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

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

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

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

Component inspector

component-inspector

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

Влияние количества пиратов на глобальное потепление


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",
                                ...
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

plot.renderTo('#target');
	
		
import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';
		
	
		
<div class="className_116zl_1">
		
	
		
.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>
		
	
		
<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>
		
	

V8

Fast Property Access

Dynamic Machine Code Generation

Efficient Garbage Collection

Redux

Идеи Redux

Cycle.js


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

ReactiveX

React

Проблема React

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


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

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

А где же?

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

Учите идеи

Вопросы?

Basisjs