Будь первым

goo.gl/ePTKan

Ideas worthspreading

Немного о себеЗовут меня Константин Кривленя.

Разработчик в 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 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" } }

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

Rework

PostCSS это не• CSS preprocessor

• CSS postprocessor

• CSS linter

• CSS minifier

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;

}

Componentinspector

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

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

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 + '">';

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

Efficient GarbageCollection

• Design Elements

• An Efficient Implementation of Self, a Dynamically-Typed Object-Oriented

Language Based on Prototypes

• Efficient implementation of the smalltalk-80 system

Redux

Идеи Redux• elm

• Command Query Responsibility Segregation (CQRS)

• Event Sourcing

Cycle.js

SourcesSinks

main()

DOM side effects

HTTP side effects

Other side effects

pure dataflow

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

А где же?• Ember

• Angular

• Angular2

• Мой любимый фреймворк

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

Учите идеи

Вопросы?

Basisjs