finom/seemple

Seemple.js framework

seemple.js

Seemple.js is a simple JavaScript framework to create single-page applications (SPAs). The simple and intuitive API is based on JavaScript classes and accessors which are accessible to all application developers of varying skills. The requirement to start your first project with Seemple.js is basic knowledge of JavaScript!

Features

• A nice reactive API to solve hard problems
• High robustness of developed apps
• The ability to refactor legacy applications without rewriting them from scratch
• Only couple of hours is needed to master the framework because of the absence of complex concepts

A bonus: the framework is documented in 3 languages: English, Ukrainian and Russian.

Download

Install via NPM

npm install seemple

Business needs

Due to extreme simplicity of the framework, even novice web developers can quickly start to do small, then medium and then large web applications. This means that web studios are able to save money by hiring younger professionals, who, in turn, could not find a job before.

Project structure

The project is structured as a monorepository powered by Lerna. /package folder includes three packages:

• seemple itself
• seemple-router for routing
• seemple-parse-form to make it easy to work with regular HTML forms

Resources

• Website
• Examples and tutorials
• JSDoc files

License: MIT License

seemple's Issues

addDataKeys('address_id date_time comment') is not a function

Такая ошибка возникает на старых браузерах, использующих движок webkit, например, opera < 31 версия.

Server side rendered data?

How can keep the initial state of a bound node till it is actively changed? Take the example of data that has been rendered in my templates from the Backend/ Server.

Using your example:

<input type="text" class="my-input"><br>
<span class="my-span">Server side data</span> <----- This value disappears

var Application = Class({
    'extends': Matreshka,
    constructor: function () {

        // bind the property x and the text field
        this.bindNode('x', '.my-input');

        // bind the property x and the ".my-output" block
        this.bindNode('x', '.my-span', {
            setValue: function (v) {
                this.innerHTML = v;
            }
        });

        // if the property "х" has changed,
        // inform about it in the console
        this.on('change:x', function () {
            console.log('x changed to ' + this.x);
        });
    }
});

var app = new Application();

The value rendered by the server in the spane is removed. It should stay till it is actively changed.
Thanks

"change:data.group_id" event doesn't work

Здравствуйте! Не срабатывают события по изменению вложенных в объект свойств.

class EditModal extends MK.Object{
    constructor(data) {
        super();
        this.jset({
            data: {
                group_id: ''
            }
        });;

        this.bindNode({
            'data.group_id': ':sandbox select[name=group_id]'
        }, {
            setValue: (v) => {
                $(this).val(v);
            }
        });

        var self = this;

        this.on('change:data.group_id', function(){
            console.log(111)
        });
    }
}

Есть data.group_id. Поле привязано к тегу <select>. По изменению <select> в консоль должен попадать определенный текст, но этого не происходит.

Повторил на Codepen

Allow binders to listen to jQuery events

// doesn't work
$('#myinput').trigger('keyup')

Bower support

Publish matreshka via bower

bower

Change please bower main to non-minified version

About Matreshka 2

UPD: To do

Matreshka code and its structure is really outdated. The code contains ugly encapsulations, smelly parts, it's written in ECMAScript 5 and the project uses really old bundler (RequireJS + Grunt). That's why I decided to start everything from scratch and make Matreshka 2 follow modern practices.

You can follow changes on "next" branch.

Features:

• ECMAScript 2015+
• Separated node modules. You can require any part of the framework with no need to require everything.

const bindNode = require('matreshka/bindnode');

• 99% compatibility with apps written with Matreshka 1.
• Test framework both in browser environment and in nodejs environment (using jsdom). This will allow us to use Matreshka on servers.
• Best code practices (at least use everything I've learned these 4 years).
• Commented code.
• High performance (all tricks I know).
• Lint via ESLint, bundle via Webpack.
• Release via semantic-release (so I'm not going to make releases manually and everything will be done automatically).
• No meaningless "rebuild" commits, another repo for browser bundle will be used instead.
• So on.

Breaking changes

Also I'm going to make the framework simpler and get rid of meaningless methods.

MK.delay,MK#delay
Reason: the method does not do anything useful.
Alternative: setTimeout (plus Function.prototype.bind or arrow functions).

MK.define, MK#define, MK.defineSetter, MK#defineSetter, MK.defineGetter, MK#defineGetter
Reason: the methods was made to easily modify a property descriptor in IE8
Alternative: since IE8 no longer supported you can use well known Object.defineProperty and Object.defineProperties instead.

MK#getAnswerToTheUltimateQuestionOfLifeTheUniverseAndEverything
Reason: outdated eastern egg :)
Alternative: no

MK.trim
Reason: unnecessary helper
Alternative: String.prototype.trim or _.trim

MK.orderBy
Reason: unnecessary helper
Alternative: _.orderBy

MK.noop
Reason: unnecessary helper
Alternative: own noop (eg. const myNoop = () => {})

MK.extend
Reason: unnecessary helper
Alternative: Object.assign, jQuery.extend, _.assignIn

MK.each
Reason: unnecessary helper
Alternative: jQuery.each, _.forEach, for..of

MK.bound, MK#bound, MK.$bound, MK#$bound
Reason: functionality duplication
Alternative: select, selectAll (this.selectAll(':bound(a), bound(b)')) or nodes and $nodes.

MK.randomString
Reason: unnecessary helper
Alternative: will be moved to its own project

MK.get, MK#get
Reason: meaningless method
Alternative: ordinary property access

MK.deepFind
Reason: unnecessary helper
Alternative: no

MK.setProto
Reason: the function is added for experiments and should not be published
Alternative: Object.setPrototypeOf

MK.toArray
Reason: unnecessary helper
Alternative: _.toArray, array spread

MK.version
Reason: minor feature which is hard to implement
Alternative: no

MK#sandbox, MK#$sandbox
Reason: misrepresentation and functionality duplication
Alternative: MK#nodes.sandbox, MK#$nodes.sandbox

MK.Object#toNative, MK.Object#toObject, MK.Array#toNative, MK.Array#toArray
Reason: functionality duplication
Alternative: toJSON methods will get recursive=true parameter.

MK.binders.file, MK.binders.dropFile, MK.binders.dragOver
Reason: highly specialized binders
Alternative: they will be moved to their own project

MK.Array#each
Reason: functionality duplication
Alternative: MK.Array#forEach, for..of

MK.Array#hasOwnProperty
Reason: anti pattern, native method override
Alternative: no

MK.Array#useBindingsParser
Reason: bindings parser will be working by default
Alternative: no

MK.Object#hasOwnProperty
Reason: anti pattern, native method override
Alternative: isDataKey method will be created instead

Class function will not be global. Instead you'll need to use MK.Class or make global variable manually (but better to use ES2015 classs instead).

bQuery will be removed at all (little private library will be used instead for framework needs)

matreshka-magic will be removed

linkProps will be renamed to calc

to will be renamed to toMatreshka

setClassFor probably will be renamed to instantiate.

Matreshka.Object#jset will be renamed to Matreshka.Object#setData

MK#isMK, MK.Object#isMKObject, MK.Array#isMKArray will be renamed to isMatreshka, isMatreshkaObject and isMatreshkaArray

useAs$ will be renamed to useDOMLibrary

You'll never see the phrase "a list of keys separated by spaces", only array of keys will be used in methods (eg addDataKeys).

The roadmap will be published later. I hope you're enjoying Matreshka!

Uncaught TypeError: Cannot read property 'length' of null matreshka.js:8269

this.unbindNode().off(); Приводит к ошибке.
В коде матрешки:
var bindings = _ref.bindings;
_ref.bindings равен null
дальше в начале цикла нет проверки на нулл и соответственно на _target2.length крешит

Возможность указывать индексы через квадратные скобки в третьем аргументе linkProps

Сейчас можно так

var object = {
  a: [1],
  b: [2]
};

MK.linkProps(object, 'sum', 'a.0 b.0', function (a0, b0) {
  return a0+b0;
});

Хотелось бы более привычный и интуитивно понятный синтаксис для указания индекса 'a[0] b[0]' и так можно было бы указывать невалидные ключи, например с точкой 'a["key.with.dots"]', что сейчас видимо не получится сделать

Матрешке нужен es5-sham.min.js ?

В документации сказано: для поддержки IE8 подключите файл из es5-shim. Но там 2 файла:

• es5-shim.min.js - обязательный файл
• es5-sham.min.js - какие-то добавки ( прямая ссылка в ридми )

Нужен ли этот второй файл для Матрёшки?

Matreshka.js is now Seemple.js - what is going on?

tl;dr to upgrade

1. Use global search/replace for "matreshka" keywords: Matreshka -> Seemple, MK -> Seemple (there is no shortcut anymore), matreshka -> seemple (for imports).
2. If you use a modular environment, update your package.json to make it use latest version of seemple package and run npm install

There was plenty of issues with Matreshka.js project so far:

1. Lack of users (I can judge it by none of Google alerts for years).
2. The project didn't brought any donations but it's for years it ate money for the .io domain and for DigitalOcean server.
3. Hard to maintain relative projects such as router and parse-form function because they were placed at different repositories. Any updates was painful, even just dependency updates.
4. The name. I would ask apologies for bringing politics to what isn't supposed to be political but the name is supposed to be fun 7 years ago but now it's associated with one aggressive country ("matreshka" means "nested doll"). An author is also not from that country and never been there. I'm really sorry for saying that. I had discussions with people from USA and Canada and they just wouldn't like to use something called "matreshka" in their projects because they don't want to scare their clients. Also everybody is confused how to pronounce "matreshka" name.

There is what is going to be happened. Work in progress but I think I can finish everything in a few days.

1. The project is renamed.
2. The organisation on Github is going to be archived.
3. The framework and relative libraries are merged into a single repository powered by Lerna. Updates can be brought much easier after that .
4. No paid domain or server anymore. Docs are going to be hosted at Github pages and available at https://seemple.js.org/ (all languages) forever!
5. The blog in Russian on Habr isn't going to be updated any more but the old articles still going to make sense, just do the replacements explained in the beginning of this text.
6. All links to social stuff such as Twitter or Gitter are going to be removed from everywhere.

Would these updates bring any new users or would they turn away existing ones? I don't know. A new name doesn't make the project better. But at least we're going to get a maintainable framework which doesn't look like a thing made for locals by locals.

ReferenceError: warnDeprecated is not defined

warnDeprecated( '#unbindElement', '#unbindNode' );

Method warnDeprecated dont exists

Bug in the TODO

When all items are completed and I click "Clear completed" only odd or even items are removed.

this.parseBindings('.my-node'); doesn't work

Works only in such form:
this.parseBindings($('.my-node'));

Multipage REST examples

It would be helpful to have a multipage (using director routing) example using REST to provide a more complete example that frameworks such as Ember, Backbone provide.

For example, an admin dashboard with multiple tables of stuff.

Matreshka#mediate - doesn't work when user types numbers

http://jsfiddle.net/bn7tp76m/2/

Функция которая передается в mediate срабатывает, но не меняет значение, до тех пор пока не введешь в поле какую-нибудь букву.

Как увидеть проблему по ссылке выше:

1. Ввести в инпут "0000"
2. В консоле покажется результат функции переданной в mediate, которая делает parseInt - 0
3. В инпуте по прежнему "0000"
4. В любое место инпута ввести символ, отличный от 0-9
5. Результат выполнения функции переданной в mediate покажется в инпуте, только после 4п.

Обнаружил на тестах

is matreshka still being actively developed?

hello -

i was wondering if matreshka is still being actively developed and used?

self.$(this) doesn't work

Здравствуйте. В матрешке версии 1.0.6 код self.$(this) работал. Сейчас (версия 1.2.0) это не работает. Исправляется просто конечно: надо просто убрать self. Но все-таки интересно: баг это или фича?)

this.bindNode('name', ':sandbox .name', {
    setValue: function(
        self.$(this).val(v);
    }
});

MK.Array#rerender() doesn't rerenders nodes from scratch

Здравствуйте. Делаю рендеринг с помощью Handlebars, переназначая метод itemRenderer у коллекции (наследника MK.Array). Из модели (наследник MK.Object) вызываю событие rerender, которое ловится коллекцией. Коллекция вызывает this.rerender(), но ничего не происходит. this.processRendering() с разными аргументами тоже ничего не делают. Как сделать перерисовку шаблона из модели?

Cannot create property which contains dot

http://jsfiddle.net/8d5o157b/

var app = new Matreshka;
app.bindNode( 'int.int', '.int' );
console.log(Matreshka.version)
app.mediate('int.int', Number);

app.on('change:int.int', function(){
    console.log( app['int.int'] );
});

Раньше поддерживалась.

where is the doc in version 2.0?

Matreshka 2 todo

As I said before, I'm rewriting everything from scratch.

UPD. The todo list of API methods is removed because they are already implemented. Check out a list of changes.

• Set up a repository for distributed bundle (here)
• Create project with binders: file, dropFile, dragover (here)
• Create project with randomString function (here)
• Create project with bQuery.create function (here)
• Fix linting issues
• Make 95% coverage (set this rule as required)
• Test methods existence
• Update website, move it to matreshka.io/v2
• Rewrite gh-embed script so it doesn't need any server for its work
• Set up Travis CI, conventional changelog and semantic-release
• Get rid of TodoMVC in Russian
• Get rid of "10 reasons to try"
• Update Router article
• Review everything and publish 2.0.0-alpha.0
• Update examples
• Update TodoMVC
• Write Ukrainian documentation
• Update "From simple to simple" article
• Update "Events" article
• Update Router
• Set up Greenkeeper for all repos of matreshka organization
• Update CONTRIBUTING.md
• Update README.md
• Update benchmarks
• Get rid of VK and Facebook communities
• Set up tests for BrowserStack
• Move new documentation to matreshka.io/ and move old documentation to matreshka.io/v1
• Create a campaign on Patreon
• Publish 2.0.0-beta.0
• Make Twitter bot
• Publish 2.0.0

Problematic things:

• Update CDNJS
• Update JSDelivr
• Update bower

Today is not possible to make it because Matreshka.js is bundled to gh-pages branch but uses tags at master.