Embed Size (px)
Citation preview
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нет детального
парсинга
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 + '">';
<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• 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
• Мой любимый фреймворк
Делитесь идеями
Учите идеи
Вопросы?
