Новый фреймворк Mega
 

Ребят, давайте помогите мне придумать каких киллерфитч напихать в фреймворк этот. Я хочу сделать фреймворк на все случаи жизни решающий все проблемы пригодный везде везде, идеально сочитающийся с другими фреймворками например THREEjs. Чтобы был очень высокоуровневый но при том очень гибкий. Я хотел бы с вами его тут обсуждать, и отчиываться о том какие фитчи реализованы а какие нет. Так же есесино если кому идея понравится будем пилить вместе на гитхабе. В общем было бы офигенно использовать ваш опыт при его создании. А главное критику и недостатки которые я не могу заметить потому что со стороны то виднее).

Короче вот от меня фитчи че я хочу туда запихнуть (щас все абстрактно потому что как реализовать буду думать на следующей этапе)

1) Нужен ассинхронный рендеринг. Чтобы рисовалось только то, что должно отрисоваться на экране. Чтобы например список из 1000000 элементов рисовался мгновенно и рисовалась только та его часть которая сейчас видна на экране, но скроллеры при том и вся разметка должна вести себя так, как будто те элементы уже отрисованы.


2) Сверхбыстрый. Я вот думаю придумать какую то удобную модель данных, при том чтобы она имела такую штуку как "состояния" чтобы можно было сохранять состояние модели в JSON обьект. и восстанавливать его. Чтобы легко можно было делать ctrl + z грубо говоря. Активно должны использоваться сеттеры и геттеры. Это позволит нам мгновенно распространять взаимодействие между моделями. И если обнаружется что хоть какое то свойство всей общей модели данных изменилось, то эти изменения добавляются в очередь. Которая сканируется на наличие там изменений каждый requestAnimationFrame и рисуются (а модуль рисованися уже решает рисовать ли их физически или они не видны на экране и не нужно рисовать)


3) должна быть изоморфность. чтобы не дублировать логику на сервере и на клиенте. Чтобы писать один код а фреймворк сам разруливал что и где должно выполняться. Точнее вся логиа будет выполнятьяс и там и там. Бизнеслогика будет напирмер подсвечивать красным невалидный емейл. И этот же эмейл этим же алгоритмом проверки на валидность будет проверяться на сервере. Хотя сам алгоритм должен быть описан один раз. Предлагаю реализовать это в виде списков. Описываем такие сущности как списки и.т.п. и методы добавления в списки или выборки из них. И логику проверки там же. А фреймворк уже сам будет это с базой синхронить. Так же, по скольку у нас изоморфность, то этот же код летит и клиенту, и у него есть sql база в браузере. и если есть то тогда данные конкретного клиента должны там хранится и синхронится с серверными данными. И чтобы подгружались только изменения и была такая штука как версия данных. и.т.п. Для всего этого нужен бакенд на js, но он есть не у всех, по этому должна быть возможность использовать фреймворк только как клиентсайд, а сервер писать самому на чем угодно.


4) должна быть возможность удобной локализации интерфейса, например пишем в консоли mega.translate() и входим в режим переводчика и можем редактировать текст на сайте тыкая мышкой, и сохранить новый языковой пакет mega.translateEnd() и он предложит сохранимть JSON файлик с языком. Который фреймворк сам потом знает как подключить правильно и куда буквы расставить.


5) нужно чтобы фреймворк имел привязку не к размерам экрана а к пропорциям. Будем называть то типа фрймы. Описываем пропроции и даем этому фрейму имя "телефон" "планшет" "4:3" и далее можем или в стилях и в коде удобно использовать фреймсеты для верстки.


6) нужно придумать охеренную систему компонентов. придумать разные слои, взять лучшее от бем MCSS и.т.п. И все это применить к компонентам. Компоненты сайта должны состоять из шаблона логики и разметки. Компоненты должны легко мочь наследоваться друг от друга и расширяться. Надо придумать какой нибудь удобный способ описания компонентов, офигенный язык шаблонов компонентов чтобы можно было всякие рекурсии и ветвления описывать легко. А так же придумывать как наполнять сайт компонентами и как задвать им настройки. А так же как организовать взаимодействие между компонентами. Например у меня 10 чатов и вот этот вот один конкретный должен алерт делать при приходе сообщения. И.т.п.


7) Так же должен быть серверный рендеринг компонентов чтобы клиенту летела уже готовая страница. Но вся логика компонентов корректно зацеплялась за все эти развернутые перемешанные друг с другом шаблоны.


В общем надо собрать все лучшее из уже существующих фремворков соединить все это во едино и сделать лучше чем у них) иначе все это не имеет смысла.

А я пока начну придумывать спецификации для всех этих фитч. И выкладывать их сюда. (так же приветствуется критика фитч за ненужностью и указанием альтернатив)


то есть я хочу вот типа того язык шаблонов запилить, тока чтобы не было привязки к языку. я хочу чтобы внутри шаблонов можно было программировать. вся логика компонентов должна быть связана с их отображением, то такого рода логику не грех пихать прямо в разметку. и не то что негрех так и НУЖНО ДЕЛАТЬ. так делает реакт. и это мы стырим. Бизнеслогика и все такое прочее будет в сервисах.

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





НО при том я хочу как то придумать способ чтобы человек мог в шаблоне программировать логику на любом подмножестве яваскрипта, и мы не диктовали бы ему. Я пока не знаю как это сделать но я думаю. Есть идеи?

А может ну его нафиг и сделать ES6 стайл только без скобочек как в кофескрипте. и с добавлением строковых кавычек вокруг <> ? Ну то есть прогоняется код твоего компонента через мой транслятор который там все <в кавычки оборачивает> а потом ты уже его сам через что хочешь прогоняешь. Если ты писал на яваскрипте, то не пргоняешь не через что, если писал на ES6 то прогоняешь через экму и.т.п. Как идея?

Да.

У меня с баблом проблем нет котик ;) и не оффтопь пожалйуйстйа и не устраивай срачи хотя бы в этом треде. не хочешь помогать, просто молчи.

Кстати критерии скорости такие что я ставлю себе планку рисовать
10 000 000 списки менее чем за 16 миллисекунд. Только что попробовал. Вроде теоретически возможно. (да да я понимаю похоже на немо, или как там его =) ток я на полном серьезе говорю)


UPD. ладно 1 миллион)) я кое что обдумал прост.

А вот кстати как будут описываться шаблоны:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/5FWXjEcqHN8?showinfo=0" frameborder="0" allowfullscreen></iframe>

UIjs, дам тебе дружеский совет (на правах старшего (по возрасту) товарища :)): ты перфекционируешь топчешься на одном месте, я сам через это прошёл. Ты взвалил на себя слишком большой проект, который вряд ли доведёшь до конца и в итоге только потратишь время, а приобретаемый опыт сомнителен. Лучше займись каким-нибудь реальным проектом, в смысле для конечных пользователей, например, браузерную игрушку напиши или какой соц сервис. Без обид :)

Ты же понимаешь, что это очень тупо, подобное писать?!

Ты ломбард не пробовал открыть? У тебя бы получилось. ;)

Уже существующие пожалуйста. ;)

:lol: видимо мы плохо знакомы.

По делу есть кто хочет поговорить? Что на счет языка шаблонов? Удобно получается? Кто на реакте пишет? Лучше чем у них?

Ну хз, все начинания о которых ты писал тут ты так и не довел до конца. Те огрызки, что есть на гитхабе не считается.

я довел до конца 2 версии юишки. которые переплюнули ангуляр. и решил пилить третью версию только называть не ui 3.0 а название другое дать и пересмотреть все учитывая опыт использования её. (все эти фишки что выше написаны планировал реализовать в юишке но понял что эволюционно этого не сделать) и давай больше не обсуждать тему напишу я или нет. я на юишке уже сайты клепаю год как.

Ты посмотрел видео? Норм идея в таком стиле шаблоны писать?

Норм так. Но из-за аллергии на кофе, я не могу полностью воспринимать твой код)
+ реакта 0.13 в том, что там компоненты создаются естественным путём - наследуются от класса, например:

class ComponentName extends React.Component { ... }

Лично для меня так удобнее.

Safort, конечно конечно наследование естественно стырим. я думаю как можно бы сделать так чтобы можно было бы использовать эти литералы как строки ну то есть сувать в переменные и все такое, но при том чтобы они echo лись когда нужно. наверное просто нужно чтобы echo возвращал строку которую принимает)


КОРоче я же специально сказал что на любом языке должны шаблоны робить. ну давай на ES6 покажу как это бы выглядило)





каждое <li> обернется в echo('<li>') грубо говоря.

Ну или я сразу буду парсить содержимое чтобы в рантайме легче было типа
mega.startTag('ul', {class: 'user-list'})

mega.endTag('ul')

и оно скомпилируется в это, а потом чел уже это прогонит через свой любимый es6 транслятор:





надо знаете чтобы как можно было, чтобы писать че-то типа


this.listTemplate = <li><li>

render: function(){

{this.listTemplate}

}

типа того, хотя я не совсем представляю где это юзать можно

Safort, чтоб ты понял, все будет заточено так чтобы работать и под кофи и под es6 и под es5. а сам фреймворк я буду писать на es6 (возможно через es6 без скобочек транслятор который почти доделал, там потому что делать нечего, птому что все ast состоит из "сколько там пробелов вначале строки" и "пустая ли строка")

Еще, ребят, надо как-то придумать чтобы можно было делать типа как директивы как в ангуляре. Ну например ui-scroll у меня добавляет кастомные скроллеры и влияет на шаблон того к чему применяется. в реакте как я понимаю это надо реализовывать наследованием от компонента Scrollable какой нибудь. В общем это чушь. я хочу чтобы можно было типа миксины делать. вот это список собщений в чате, к нему применяю "скроллеры" (которые где то описал отдельно и могу и к чему-то другому применять), так же к нему применяю.

в реакте есть типа кастомные атрибуты которые че-то делают? ну вот например события там как onClick то есть следовательно и scrolBar какой нить можно запилить? Короче подскажите как подобное делается в реакте.

Кстати еще знаете какую штуку придумал)) горячую замену кода))
Чтобы изменил код компонента или шаблон и изменения могли примениться без обновления страницы. И плагин на браузер напишем такой ))
используя виртуал дом как в реакте такое легко можно провернуть

а если какой нить "бизнеслогика" изменяется то тогда уже страничку обновлять

Короче понятно, все как обычно самому надо делать

Есть хоть кто, кто плагины на Phpstorm писать может? Чтобы синтаксис новый добавить.

Не знаю людей с которыми ты в дружеских отношениях на форуме. Так что да, пили.

Gozar, а еще должна быть такая хрень как синхрон данных между вкладками и чтобы только одна рутовая вкладка-сервер запросы на сервер (тафталогия) посылала)

со всеми как бы)

UIjs,
если пробежаться по всем хотелкам, что ты перечислил, то работы тут на годы)

во во) но на самом деле пол года в свободное время хватит, думаю к концу лета уже бетку выпущу)

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

мне бы тогда хоть ваше обсуждение а код я сам буду пилить и показывать что сделал. я просто боюсь ошибки допустить и хотел бы чтобы весь наш с вами опыт смешался. это же круче чем одна голова (даже такая хитрая как моя).

короче вот это:





компилируется вот в это:

Блин как дурак сижу думаю как настроить гульп для сборки меги)))
потом доперло что раз пишу на es6 то мега должна быть в нескольких файлах))) и сборка не нужна, только тесты. а уже конечный юзер делает сборку если у его клиентов в браузере es6 не поддерживается)

оставил всего 3 папки, mega, demo и tests