Giter VIP home page Giter VIP logo

articles's Introduction

basis.js

npm Build Status Join the chat at https://gitter.im/basisjs/basisjs

Версия на русском (более полная и подробная)

basis.js – is open-source JavaScript framework to build complex single page applications (SPA). It's developing with focus on dynamics (everything could change), flexibility, performance and ability to manage a lot of data (models, collections etc).

You can compare performance of basis.js with other frameworks by some synthetic tests: animation through bindings (alternative version), model generation and simple list with a lot items generation.

Not just a framework

basis.js has tools that helps build awesome applications:

  • basisjs-tools - CLI to manage basis.js project: create instances, build for production and special web server that notify client when resources are updated. See more information in project repo.
  • Google Chrome plugin (repo) - helps to manage templates and localization with live updates and change saving to files, it also provide project file structure graph and other information.

Using

> npm install basisjs

or use build as library

> npm install basis-library

Library version can be fetched from CDN: https://cdnjs.com/libraries/basis.js

Run tests

Install all dependencies (by npm install). Than use command:

> npm test

Another option is start http server and open /test/index.html in your browser to run test suite.

Where can I get more information

Unfortunatelly, most information is in Russian now, but we are working on it.

  • basisjs.com – project site
  • Articles – documentation about various parts of the framework (in progress);
  • Tour – interactive slides with description and code, that you could tweak;
  • Tutorial – step by step instruction for how to use basis.js (in progress)
  • Docs – auto-documentation, that generates on fly by module structure and their source code;
  • Demo – demo set that shows some of abilities of the framework;
  • Slides – slides for basis.js related talks.

Media channels:

articles's People

Contributors

agoalofalife avatar ekaragodin avatar fateevv avatar ilyar avatar lahmatiy avatar mammasonnim avatar megakote avatar prostoandrei avatar smelukov avatar tyanas avatar vtrushin avatar wuzyk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

articles's Issues

Мелкие правки

Ошибка в описание шаблона <b:set-class> и <b:set-class>

описание <b:class> и <b:set-class> одинаковы.

  • <b:class> и <b:append-class> – добавляет класс (классы) в атрибут class;

    <b:include src="./foo.tmpl">
      <b:class ref="label" value="foo foo_{selected}"/>
    </b:inclide>

    foo.tmpl:

    <div class="example">
      <span{label} class="bar">{title}</span>
    </div>

    Результат:

    <div class="example">
      <span{label} class="bar foo foo_{selected}">{title}</span>
    </div>
    • <b:set-class> – замещает значение атрибута class на новое значение;

      <b:include src="./foo.tmpl">
        <b:class ref="label" value="foo foo_{selected}"/>
      </b:inclide>

      foo.tmpl:

      <div class="example">
        <span{label} class="bar">{title}</span>
      </div>

      Результат:

      <div class="example">
        <span{label} class="bar foo foo_{selected}">{title}</span>
      </div>

Туториал по работе с svg

  1. добавление свг напрямую (<svg:svg>...). Зачем нужен namespace

  2. типичный кейс свг для иконок как symbol (<b:svg>...)
    2.1 symbol надо готовить

    • 2.1.1 define gradients (and other stuff) outside symbol see basisjs/basisjs/issues/141
    • 2.1.2 mask внутри symbol может привести к тому что иконка будет не видна в ИЕ11

    2.2 типичный пример <b:svg use="/pathToSvgDefs/symbol-defs.svg#iconSvg-desktop"></b:svg> (c) @sm0g

    2.3 символы хороши тем, что
    - они эффективно переиспользуются на странице ( в отличие от "инлайн" svg)
    - можно менять цвет с помощью css (on hover) (в отличие от вставки svg как background: url(icon.svg))

  3. надо заресерчить, почему по некоторым (или по всем?) иконкам в ИЕ не получается кликать

вопросы из https://gitter.im/basisjs/basisjs

  1. @sm0g почему не ренднрятся SVG элементы (Chrome) в темплейтах?
<svg aria-hidden="true" class="octicon octicon-plus" width="12" height="16" role="img" version="1.1" viewBox="0 0 12 16">
    <path d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path>
</svg>

Ответ: нужен namespace, см ниже

  1. @harvyso февр. 07 12:43
    работает ли basisjs c SVG также как c HTML DOM, есть примеры?
    template: "<b:svg><circle cx='10' cy='20' r='10' /></b:svg>"
    svg добавлен как element, но почему circle как text node?
    добавление xmlns:svg = 'http://www.w3.org/2000/svg' и изменение circle на svg:circle не помогает.
    можете пояснить как обстоит дело с SVG!?

ответы к 2:

Alexey Smirnov @sm0g февр. 07 13:34
Я делал через use <b:svg use="/pathToSvgDefs/symbol-defs.svg#iconSvg-desktop"></b:svg>
попробуйте объявить svg элементы в отдельном файле (спрайты) добавить в шаблон. Далее использовать через use

Roman Dvornov @lahmatiy февр. 07 22:09
работает так же как с HTML, но нужно добавлять префикс svg:, то есть правильно будет
template: "<svg:svg><svg:circle cx='10' cy='20' r='10' /></svg:svg>"

Когда svg вставляется в html, то браузерный парсер неявно добавляет неймспейс узлам
Но если вы сделаете document.createElement('svg'), то будет создана HTML нода, а не SVG. Для того чтобы сделать правильно, нужно document.createElementNS('svg', 'http://www.w3.org/2000/svg')
по идее при вставке в html нужно писать так
<svg:svg xmlns:svg="http://www.w3.org/2000/svg"><svg:circle cx='10' cy='20' r='10' /></svg:svg>
но это сложно для большинства, потому, как писал выше, разработчики браузеров это упростили

Roman Dvornov @lahmatiy февр. 07 22:16
кстати да, нужно
template: '<svg:svg><svg:circle cx="10" cy="20" r="10" /></svg:svg>'
одинарные кавычки не разрешены для атрибутов в XML/XHTML, парсер шаблонизатора ведет себя как XHTML парсер, поэтому встретив ' он посчитал конструкцию неверной для тега и сконвертировал все в текст
так вот, в шаблонизаторе basis'е нет словарей для тегов, что что-то относится к другому неймспейсу, но он умеет работать с неймспейсами
сейчас там зашиты неймспейсы svg и xlink https://github.com/basisjs/basisjs/blob/master/src/basis/template/namespace.js

конец ответов к 2

basis.data doesn't contain method "Subset"

// создаем подмножество
var subset = new basis.data.Subset({
  source: dataSource,    // задаем источник
  rule: function(item){  // правило
    return item.data.value % 2;
  }
});

this example doesn't work for basisjs 1.3, maybe should be basis.data.dataset.Filter

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

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

Очень хотелось бы увидеть "best practice" ,

p.s. Заждались вторую часть туториала...

p.s-2 мне кажется или у react.js подход аналогичный basis.js ?...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.