Я мигрировал с React на snakeskin+es6+MVH(MVCH) :D

Это че такое?)
В смысле я понимаю что это паттерн, но какой?)

(MVH)Model View Handler
или
(MVCH)Model View Controller Handler

Создается DOM элемент с id и к нему привязывается шаблон, событие пробрасывается из view через контроллер в обработчик handler.

Таким образом получается виджет.

пысы: элемент DOM может быть уже создан и к нему может быть ничего не привязано :)

Таким образом контейнеры могут быть статические и динамические и переопределяться на различные обработчики.

Gozar, а можеim какой то hello world в песочнице с ss сделать?

В песочницу не поместится. Это по сути фреймворк с разбивкой на виджеты и имеющий жесткие правила.

Придется много объяснять, а у меня пока нет желания и сил, я хочу хотя бы до альфы его довести убрав пару граблей.

У нас на работе юзается связка SS + Angular (для дата биндинга), а вообще SS7 получит универсальный интерфейс для работы с любыми data-binding библиотеками, Angular, React, Ractive и т.д.

А можно пример для тупых джунов ?)

окей, интересно будет глянуть)

SS генерит шаблоны для Angular. Вся суть в том, что SS хорошо умеет генерить HTML, а связку данных может делать любая из удобных для разраба библиотек.

- template foo()
  < .my
    < .&__bar
      {{ param }}

<div class="my">
  <div class="my__bar">{{ param }}</div>
</div>

Если я не туплю, to SS на сервере генерит html а на клиенте его подхватывает ангуляр?)
Или я как обычно туплю?)

SS - это язык описания шаблонов транслируемый в JS, сахар, такой же как CoffeeScript / TypeScript. Поэтому ему пофиг где исполняться. У меня на работе SS крутиться на этапе сборки как gulp таск.

- template helloWorld(name = 'world')
  < h1 :: Hello {name}!

После трансляции превратится в

/* Snakeskin v6.5.21, key <default,false,\n,xml,false,false,,stringConcat,true,true,true,,false,true,i18n,bem,true>, label <1420975710654>, includes <>, generated at <1421479907753>.
   This code is generated automatically, don't alter it. */
(function() {
    'use strict';
    var __IS_NODE__ = false,
        __AMD__ = typeof define === 'function' && define.amd,
        __HAS_EXPORTS__ = typeof exports !== 'undefined',
        __EXPORTS__ = __HAS_EXPORTS__ ? exports : __AMD__ ? {} : this;

   try {
        __IS_NODE__ = typeof process === 'object' && Object.prototype.toString.call(process) === '[object process]';
    } catch (ignore) {}

    var Snakeskin = (__IS_NODE__ ? global : this).Snakeskin;

    function __INIT__(obj) {
        Snakeskin = Snakeskin || (obj instanceof Object ? obj : void 0);
        if (__HAS_EXPORTS__) {
            delete __EXPORTS__.init;
        }
        if (__AMD__) {
            define(['Snakeskin'], function(ss) {
                Snakeskin = Snakeskin || ss;
                __EXEC__.call(__EXPORTS__);
                return __EXPORTS__;
            });

        } else {
            if (__IS_NODE__) {
                Snakeskin = Snakeskin || require(obj);
            }
            __EXEC__.call(__EXPORTS__);
            return __EXPORTS__;
        }
    }

    if (__HAS_EXPORTS__) {
        __EXPORTS__.init = __INIT__;
    }

    function __EXEC__() {
        var __ROOT__ = this,
            self = this;
 
       var __APPEND__ = Snakeskin.appendChild,
            __FILTERS__ = Snakeskin.Filters,
            __VARS__ = Snakeskin.Vars,
            __LOCAL__ = Snakeskin.LocalVars;
        __LOCAL__.$__0_4806f = void 0; /* Snakeskin template: helloWorld; name  */

        var helloWorld = this.helloWorld = function helloWorld(name) {
            var __THIS__ = this,
                __CALLEE__ = __ROOT__.helloWorld,
                callee = __CALLEE__;
 
           if (!callee.Blocks) {
                var __BLOCKS__ = __CALLEE__.Blocks = {},
                    blocks = __BLOCKS__;
            }
 
           var __RESULT__ = '',
                __COMMENT_RESULT__, __NODE__, $0;

            function getTplResult(opt_clear) {
                var res = __RESULT__;
                if (opt_clear) {
                    __RESULT__ = '';
                }
                return res;
            }

            function clearTplResult() {
                __RESULT__ = '';
            }
 
           var __RETURN__ = false,
                __RETURN_VAL__;

            var TPL_NAME = "helloWorld",
                PARENT_TPL_NAME;
 
           name = name != null ? name : 'world';
            __RESULT__ += '<h1>Hello ';
            __RESULT__ += __FILTERS__.html(__FILTERS__.undef(name), false, false);
            __RESULT__ += '!</h1> ';
            return __RESULT__;
        };
 
       Snakeskin.cache["helloWorld"] = this.helloWorld; /* Snakeskin template. */
    }

    if (!__IS_NODE__ && !__HAS_EXPORTS__) {
        __INIT__();
    }
}).call(this);

ss обычно состоит из двух файлов .ss и ss.js. В ss шаблон, в ss.js javascript. Типа как stylus .styl и .css

Я на клиенте подключаю сгенеренные шаблоны в <header

<script src="tpl/menu.ss.js

а вызываю конструктором:

Snakeskin.cache[name](data); //например: Snakeskin.cache['menu'](data)

kobezzza не описал это подробно, наверное думает, что это и так ясно :)

Ну, я просто думал, что все будет удобнее юзать явный экспорт по имени, а cache добавил для своих нужд, но раз есть кейзы где удобнее юзать его, то я опишу это в доке + в SS7 будет поддержка ES6 модулей.

а как же вебпак? я думал такими динозаврами один я пользуюсь

Будет плагинчик, но gulp и webpack разные вещи и я юзаю их одновременно.

kobezzza, ты говорил что юзаешь аналог jsdoc ? Не могу найти как называется

Эмммм, даже не знаю, о чём ты :)

Мб про Flow? Но это говнище.

Наверное TypeScript :D

Gozar,
лол))

спасибо, перешел на девятую версию :)

сам сегодня поставил галп, ибо грант:
1. надоел тупить
2. не нравился с самого начала

---

upd:
Кто-нибудь пишет на node.js es6? Сегодня поставил 0.12.6 модули не заработали...
es5 достал уже)

А не рано? Мне как-то сыкотно переезжать на es6, особенно после внезапного обновления до 12.6 :D

А должны были? Они разве не с мержинга io.js v4... должны заработать? 12.6 просто внезапная заглушка, там мало что поменялось с 12.2

kobezzza,
ты пишешь на node на es6?

Конечно. Такое ощущение, что ты форум не читаешь) Тут посоны уже с прошлого года активно форсят ES6)

Так и не должны были, там же их пока нету. Или ты про require() говоришь?

З.Ы. зачем 0.12.6, если есть 0.12.7?

:D имею ввиду без трансляции запускать на ноде) Есть такое? Мне модули, классы оч. нужны)

nerv_,
модулей точно нет, а про классы не в курсе. Я на io сижу, там они уже есть)

nerv_, ну поставь себе gulp-babel, пиши на es6 и радуйся жизни. Ещё можно заюзать gulp-watch, и тогда вообще ощущение, что никакой прослойки у тебя и нет. :)

как быть, если я хочу импортить модули в gulpfile.js?)

Ага, я на ES6 уже 3 года сижу. Вот примерчик нодовского проекта https://github.com/MonicBuilder/Monic

nerv_, ну галпфайл как правило на es5 пишется, так что только через require :C

Но галпфайл -- он небольшой же, можно и пострадать чуть-чуть. :)

в моем случае все события развиваются в gulp-файле
сервера нету, т.к. приложение мобильное

по поводу небольшой

Ну, сделай галп для галпа)

P. S. Остальное в личку.

Вместе с babel устанавливается утилита babel-node, аналогичная по функционалу простому node, но транспилящая перед запуском, запускай ею:

//package.json
{
  dependencies: {
    "babel": "^5.0.0"
  },
  scripts: {
    "start": "babel-node ./index.js"
  }
}

Второй вариант - использовать require hook (тогда можно запускать просто через node):

//index.js
require("babel/register");
require("./server");

Babel подменит глобальную функцию require своей собственной, которая перед запуском модулей будет их предварительно транспиллить.

В обоих случаях рекомендуется создать в корне проекта JSON-файл с именем .babelrc и заблокировать там фичи, которые уже поддерживаются используемой платформой.

Мой файл для io.js выглядит так (может, уже устарел):

{
    "blacklist": [
        "es6.classes",
        "es6.blockScoping",
        "es6.constants",
        "es6.forOf",
        "es6.templateLiterals",
        "es6.properties.computed",
        "es6.properties.shorthand",
        "regenerator"
    ]
}

//package.json
{
  dependencies: {
    "babel": "^5.0.0",
    "gulp": "^3.0.0"
  },
  scripts: {
    "gulp": "gulp --require babel/register"
  }
}

Erolast, спасибо. Для меня представляли большую ценность в т.ч. модули es6.

Попытался использовать webpack, результат - сборка начинается, но в процессе подъема зависимостей gulp падает с ошибками

// gulpfile.es6

import gulp from './node_modules/gulp/index.js';

// webpack.gulpfile.js

module.exports = {
    entry: './gulpfile.es6',
    output: {
        path: './',
        filename: 'gulpfile.js'
    },
    module: {
        loaders: [
            // [url]https://github.com/babel/babel-loader[/url]
            {test: /\.es6$/, loader: 'babel'}
        ]
    }
};

> webpack.cmd --progress --colors --config webpack.gulpfile.js

Hash: 1d2c31565f3bb2097d35
Version: webpack 1.10.1
Time: 31356ms
      Asset    Size  Chunks             Chunk Names
gulpfile.js  900 kB       0  [emitted]  main
    + 202 hidden modules

WARNING in ./~/gulp/~/vinyl-fs/~/graceful-fs/fs.js
Critical dependencies:
11:12-19 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/gulp/~/vinyl-fs/~/graceful-fs/fs.js 11:12-19

WARNING in ./~/gulp/~/vinyl-fs/~/graceful-fs/package.json
Module parse failed: MY_PATH\node_modules\gulp\node_modules\vinyl-fs\node_modules\graceful-fs\package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "author": {
|     "name": "Isaac Z. Schlueter",
|     "email": "i@izs.me",
 @ ./~/gulp/~/vinyl-fs/~/graceful-fs ^\.\/.*$

WARNING in ./~/gulp/~/vinyl-fs/~/graceful-fs/LICENSE
Module parse failed: MY_PATH\node_modules\gulp\node_modules\vinyl-fs\node_modules\graceful-fs\LICENSE Line 1: Unexpected identifier
You may need an appropriate loader to handle this file type.
| The ISC License
| 
| Copyright (c) Isaac Z. Schlueter and Contributors
 @ ./~/gulp/~/vinyl-fs/~/graceful-fs ^\.\/.*$

WARNING in ./~/gulp/~/vinyl-fs/~/graceful-fs/README.md
Module parse failed: MY_PATH\node_modules\gulp\node_modules\vinyl-fs\node_modules\graceful-fs\README.md Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| # graceful-fs
| 
| graceful-fs functions as a drop-in replacement for the fs module,
 @ ./~/gulp/~/vinyl-fs/~/graceful-fs ^\.\/.*$

WARNING in ./~/gulp/~/vinyl-fs/~/glob-watcher/~/gaze/~/globule/~/minimatch/minimatch.js
Critical dependencies:
6:5-12 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/gulp/~/vinyl-fs/~/glob-watcher/~/gaze/~/globule/~/minimatch/minimatch.js 6:5-12

WARNING in ./~/gulp/~/vinyl-fs/~/glob-watcher/~/gaze/~/globule/~/minimatch/package.json
Module parse failed: MY_PATH\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-watcher\node_modules\gaze\node_modules\globule\node_modules\minimatch\packa
ge.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "author": {
|     "name": "Isaac Z. Schlueter",
|     "email": "i@izs.me",
 @ ./~/gulp/~/vinyl-fs/~/glob-watcher/~/gaze/~/globule/~/minimatch ^\.\/.*$

WARNING in ./~/gulp/~/vinyl-fs/~/glob-watcher/~/gaze/~/globule/~/minimatch/README.md
Module parse failed: MY_PATH\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-watcher\node_modules\gaze\node_modules\globule\node_modules\minimatch\READM
E.md Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| # minimatch
| 
| A minimal matching utility.
 @ ./~/gulp/~/vinyl-fs/~/glob-watcher/~/gaze/~/globule/~/minimatch ^\.\/.*$

WARNING in ./~/gulp/~/vinyl-fs/~/glob-watcher/~/gaze/~/globule/~/minimatch/LICENSE
Module parse failed: MY_PATH\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-watcher\node_modules\gaze\node_modules\globule\node_modules\minimatch\LICEN
SE Line 1: Unexpected number
You may need an appropriate loader to handle this file type.
| Copyright 2009, 2010, 2011 Isaac Z. Schlueter.
| All rights reserved.
| 
 @ ./~/gulp/~/vinyl-fs/~/glob-watcher/~/gaze/~/globule/~/minimatch ^\.\/.*$

ERROR in ./~/gulp-util/~/beeper/index.js
Module parse failed: MY_PATH\node_modules\gulp-util\node_modules\beeper\index.js Line 9: Illegal return statement
You may need an appropriate loader to handle this file type.
|       process.argv.indexOf('--beep=false') !== -1) {
|       module.exports = function () {};
|       return;
| }
| 
 @ ./~/gulp-util/index.js 9:8-25

ERROR in ./~/gulp/~/vinyl-fs/lib/dest/writeContents/index.js
Module not found: Error: Cannot resolve module 'fs' in MY_PATH\node_modules\gulp\node_modules\vinyl-fs\lib\dest\writeContents
 @ ./~/gulp/~/vinyl-fs/lib/dest/writeContents/index.js 3:9-22

ERROR in ./~/gulp-util/~/vinyl/~/clone-stats/index.js
Module not found: Error: Cannot resolve module 'fs' in MY_PATH\node_modules\gulp-util\node_modules\vinyl\node_modules\clone-stats
 @ ./~/gulp-util/~/vinyl/~/clone-stats/index.js 1:11-24

ERROR in ./~/gulp/~/vinyl-fs/~/mkdirp/index.js
Module not found: Error: Cannot resolve module 'fs' in MY_PATH\node_modules\gulp\node_modules\vinyl-fs\node_modules\mkdirp
 @ ./~/gulp/~/vinyl-fs/~/mkdirp/index.js 2:9-22

ERROR in ./~/gulp/~/vinyl-fs/~/glob-watcher/~/gaze/lib/gaze.js
Module not found: Error: Cannot resolve module 'fs' in MY_PATH\node_modules\gulp\node_modules\vinyl-fs\node_modules\glob-watcher\node_modules\gaze\lib
 @ ./~/gulp/~/vinyl-fs/~/glob-watcher/~/gaze/lib/gaze.js 14:9-22

ERROR in ./~/gulp/~/vinyl-fs/~/graceful-fs/fs.js
Module not found: Error: Cannot resolve module 'module' in MY_PATH\node_modules\gulp\node_modules\vinyl-fs\node_modules\graceful-fs
 @ ./~/gulp/~/vinyl-fs/~/graceful-fs/fs.js 5:10-27

ERROR in ./~/gulp/~/vinyl-fs/~/vinyl/~/clone-stats/index.js
Module not found: Error: Cannot resolve module 'fs' in MY_PATH\node_modules\gulp\node_modules\vinyl-fs\node_modules\vinyl\node_modules\clone-stats
 @ ./~/gulp/~/vinyl-fs/~/vinyl/~/clone-stats/index.js 1:11-24

...

ES6-модули транспилятся в обычный нодовский require, так что можно просто import "gulp" from "gulp".

Во-первых, для сборки бэкэнда нужно установить свойство target в конфиге вебпака на node.

Во-вторых, не все npm-овские модули можно просто так взять и забундлить. Проблема в том, что нативная нодовская система модулей допускает большое количество хаков, от части из которых у вебпака едет крыша (как, например, от ретурна из внешнего кода), так что тут либо разбираться с каждой ошибкой в отдельности, либо забить и запретить бундлинг node_modules:

"use strict";
let fs = require("fs");

module.exports = {
    entry: './gulpfile.es6',
    target: "node",
    *!*externals: fs.readdirSync('node_modules')*/!*,
    output: {
        path: './',
        filename: 'gulpfile.js',
        *!*libraryTarget: "commonjs"*/!*
    },
    module: {
        loaders: [
            {test: /\.es6$/, loader: 'babel'}
        ]
    }
};

Erolast, большое спасибо! :)

тут собрал в кучу

общем у меня есть способ сделать выборку елементов по класах(в условии отсутствия querySelectorAll и getElementsByClassName) в три раза быстрее чем в jquery, стоит ли сделать пул-риквест в sizzle?
http://i.imgur.com/YLWYhIl.png

а вот скрин с файрфокса 39 - http://i.imgur.com/lfCIJCP.png
тоже в среднем выигрывает sizzle в два с половиной раза :dance:

Да ну? А в бенчмарке

Последняя версия "sizzle.js" только-что скачаная с github, а "sizzle_old.js" найден в том же архиве
http://i.imgur.com/IiADcla.png
Вам таки легче стало? ;)
Щас кину скрин с восьмого осла
PS: я напомню еще раз - это результаты когда нету QSA и getElementsByClassName,
"блокирую" их я так

<script type="text/javascript">
  document.querySelectorAll = undefined;
  document.getElementsByClassName = undefined;
</script>

А с QSA и getElementsByClassName результаты у всех не больше 2мс ;)

скрин-доказательство с 8 осла
 

вот скрин с восьмого козла осла

забудь о нем, он умер :)