Будь первым
Transcript of Будь первым
![Page 2: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/2.jpg)
![Page 3: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/3.jpg)
![Page 4: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/4.jpg)
Ideas worthspreading
![Page 5: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/5.jpg)
Немного о себеЗовут меня Константин Кривленя.
Разработчик в Targetprocess.
Помогаю опенсорсной JavaScript-библиотеки
чартов Taucharts.
Twitter (https://twitter.com/Krivlenia/)
Github (https://github.com/Mavrin/)
Хабр (http://habrahabr.ru/users/mavrin/)
![Page 6: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/6.jpg)
![Page 7: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/7.jpg)
#!/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; }
![Page 8: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/8.jpg)
/* 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' ] );
![Page 9: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/9.jpg)
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']);
};
![Page 10: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/10.jpg)
{ ... "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" } }
![Page 11: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/11.jpg)
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
![Page 12: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/12.jpg)
• Webpack
• Gulp
• Автоматизация для фронтендеров
![Page 13: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/13.jpg)
PostCSS
![Page 14: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/14.jpg)
![Page 15: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/15.jpg)
Rework
![Page 16: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/16.jpg)
PostCSS это не• CSS preprocessor
• CSS postprocessor
• CSS linter
• CSS minifier
![Page 17: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/17.jpg)
PostCSS это инструмент трансформацииCSS с помощью JavaScript
![Page 18: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/18.jpg)
#СитникДавайЕще
![Page 19: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/19.jpg)
Проблема PostCSSнет детального
парсинга
![Page 21: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/21.jpg)
![Page 22: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/22.jpg)
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;
}
![Page 24: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/24.jpg)
![Page 26: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/26.jpg)
![Page 27: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/27.jpg)
Влияние количества пиратов наглобальное потепление
35000 45000 20000 15000 5000 400 17
Число Пиратов Примерно
13
13.5
14
14.5
15
15.5
16
16.5
Земная Средн
яя Тем
пература (°C)
![Page 28: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/28.jpg)
![Page 29: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/29.jpg)
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');
![Page 30: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/30.jpg)
var plot = new tauCharts.Plot({ ... unit: { type: "COORDS.RECT", ..., frames: [ { units: [ { ..., type: "COORDS.RECT", units: [ { size: "size", type: "ELEMENT.LINE", ... } ] } ] } ] }});
![Page 31: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/31.jpg)
![Page 32: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/32.jpg)
import styles from "./style.css";
// import { className } from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';
![Page 33: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/33.jpg)
<div class="className_116zl_1">
![Page 34: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/34.jpg)
.className {
color: green;
background: red;
}
.otherClassName {
composes: className;
color: yellow;
}
![Page 35: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/35.jpg)
![Page 36: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/36.jpg)
<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>
![Page 37: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/37.jpg)
<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>
![Page 38: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/38.jpg)
![Page 39: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/39.jpg)
V8
![Page 40: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/40.jpg)
Fast Property Access
![Page 41: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/41.jpg)
Dynamic Machine CodeGeneration
![Page 42: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/42.jpg)
Efficient GarbageCollection
![Page 43: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/43.jpg)
• Design Elements
• An Efficient Implementation of Self, a Dynamically-Typed Object-Oriented
Language Based on Prototypes
• Efficient implementation of the smalltalk-80 system
![Page 45: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/45.jpg)
![Page 46: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/46.jpg)
Идеи Redux• elm
• Command Query Responsibility Segregation (CQRS)
• Event Sourcing
![Page 47: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/47.jpg)
Cycle.js
![Page 48: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/48.jpg)
SourcesSinks
main()
DOM side effects
HTTP side effects
Other side effects
pure dataflow
![Page 49: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/49.jpg)
![Page 50: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/50.jpg)
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);
![Page 51: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/51.jpg)
ReactiveX
![Page 52: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/52.jpg)
![Page 53: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/53.jpg)
React
![Page 54: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/54.jpg)
![Page 55: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/55.jpg)
![Page 56: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/56.jpg)
![Page 57: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/57.jpg)
Проблема React
![Page 58: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/58.jpg)
Еще однаабстракция
![Page 59: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/59.jpg)
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>
)
![Page 60: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/60.jpg)
var MyForm = React.createClass({
onSend: function(e) {
this.props.send()
},
render: function() {
return (
;
<form onSubmit={this.onSend}>
<Input type="text">
<Button>Ok</Button>
</form>
)
![Page 61: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/61.jpg)
Учите родные API
![Page 62: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/62.jpg)
А где же?• Ember
• Angular
• Angular2
• Мой любимый фреймворк
![Page 63: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/63.jpg)
Делитесь идеями
![Page 64: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/64.jpg)
Учите идеи
![Page 65: Будь первым](https://reader034.fdocument.pub/reader034/viewer/2022042520/587005901a28ab427f8b5efd/html5/thumbnails/65.jpg)
Вопросы?