Версия для печати
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум на Исходниках.RU > JavaScript, DOM/DHTML > Велосипед ли?


Автор: foreach 06.01.17, 09:21
Есть идея создания фреймворка под задачу, но может уже есть такой?
Суть идеи:
подстановка в HTML значений из JSON-ответа.

Есть верстка:
<{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}>
    <html>
    <body>
    <div data-rest-url='/test'>
    <p data-json-path='$.name'></p>
    </div>
    </body>
    </html>


Ответ от сервер по адресу /test:
<{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}>
    {
    name: 'aaa'
    }


Итог:
<{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}>
    <html>
    <body>
    <div data-rest-url='/test'>
    <p data-json-path='$.name'>aaa</p>
    </div>
    </body>
    </html>

Автор: Serafim 09.01.17, 10:22
1) На 99% состоят из твоего "велосипеда": React и Knockout (Generic и/или Punches)
2) Примерно на 30% состоят из этого "велосипеда": Vue, Angular, React & Redux, Backbone, Ember, Aurelia, etc...

Итог: Бери всё, что включает в себя
а) Cлова "framework" или "MVVM/MVC/MVP"
б) Не начинается с букв "Jqu"
в) Не заканчивается на "ery"

и ты 100% получишь искомое :whistle:

Добавлено
Чуть подробнее:
1) Это библиотеки, которые реализуют только связь между V и VM, по ходу дела предоставляя шаблонизацию. Отличия только в способе рендера:
1.1) React использует виртуальный абстрактный DOM для построения реального дерева и дифф с ререндером компонентов для отслеживания изменений. Модно, молодёжно и очень быстро. Правда весь мир 10 лет разделял логику и представление, а модное и молодёжное движение решило что это путь в никуда. Да и собрать по-нормальному можно только через вебпак, что есть настолько большое извращение, что аж круто, но руки бы поотрывать тому, кто его придумал.
1.2) Knockout использует шаблонизацию на самом DOM и объекты-обсерверы для отслеживания изменений. Т.к. эти штуки очень мощные (т.е. учитывают блокировку рекурсии, учитывают контекст компьютед-функций и прочего) довольно медленно стартует. Но используя эту штуку и зная нормально JS можно изобрести любой "фреймворк", повторив его синтаксис почти что с нуля. Самое мощное решение с самым чистым кодом на выхлопе что есть на данный момент.

2) Тупо монстры, где V-VM лишь одна из составляющих
2.1) Vue - огрызок с плюшками, типа лайтовая версия "N фреймворка" для ньюби
2.2) Angular - свой "путь ниндзя", довольно прикольный и поковыряться стоит, можно сразу смотреть Angualar 4+, т.к., подозреваю, что через пару месяцев уже Angular 10 зарелизится... :jokingly:
2.3) Redux - стероиды для реакта
2.4) Backbone - прадедушка ангулара
2.5) Ember - уродливый прадедушка ангулара, но зато зашибает всех одним мизинцем
2.6) Aurelia - то, во что можно превратить Knockout и то, каким должен быть Vue, а не тот урезанный огрызок, что там сейчас. Безумно элегантно, безумно красиво... и сложно. Переименованный Durandal и то, чем мог бы быть Angular 2 (потом разраб оттуда ливнул, переименовал свой Durandal в Aurelia и завелосипедил V + VM что держалась на Knockout). Супер штука, но не взелетла (JSники ниасилили), так что можно считать его полумёртвым.

Добро пожаловать в то, где обитают JS-ники.

Автор: Астарот 09.01.17, 11:20
Цитата Serafim @
Правда весь мир 10 лет разделял логику и представление, а модное и молодёжное движение решило что это путь в никуда

Пааазвольте! :) Логику представления и само представление вполне можно (а может и нужно) хранить вместе 8-)

Добавлено
Цитата Serafim @
можно сразу смотреть Angualar 4+

Четверка еще не релизнулась же.

Цитата Serafim @
подозреваю, что через пару месяцев уже Angular 10 зарелизится... :jokingly:

Ну, они перешли на модную со времен фирефокса систему "на каждый чих - новая версия". Главное что б не было такой разницы, как между 1.х и 2.х

Добавлено
foreach, если простыми словами, то тебе нужно разделение модели и представления. Это то, что тебе со страшными аббревиатурами сказал Serafim :D То есть о том, что бы формировать верстку на сервере придется забыть (и слава б-гу!), теперь сервер отвечает за данные, а за отрисовку оных отвечает исключительно клиент. Если хочется написать свой велик, и просто посмотреть как оно будет работать, то можно на том же jQuery на коленке что-то наваять. Если нужно что-то, что будет не просто разделять модель и вью, а еще и апдейтить вью при изменениях модели, то весь ворох фреймворков и библиотек тебе в руки, чуть выше все расписано. От себя добавлю, что любой фреймворк имеет более высокий порог входа, нежели библиотека, поэтому на "просто пощупать" рекомендую React - это библиотека, и если люди не врут, то более-менее прямо ее использовать можно уже на второй день, как взял в руки. Это не ангуляр, в который неделями с матом въезжать приходится...

Автор: Serafim 09.01.17, 22:23
Я всё равно всеми руками за нокаут, он ещё проще и удобнее реакта :tong:

Автор: Астарот 10.01.17, 06:06
Цитата Serafim @
Я всё равно всеми руками за нокаут, он ещё проще и удобнее реакта :tong:

Ты, похоже, единственный, кто его использует :) Реально больше практически нигде не встречал упоминаний о нем.

Автор: Serafim 10.01.17, 12:50
Да нет, весь майкрософт на нём сидит, кусок яндекса и небольшая толика рамблера (не без моего активного участия) :-? С другой стороны буквально только что тред про него в трендах 2017 замутился: https://habrahabr.ru/company/ruvds/blog/319...omment_10001842 видишь, не я один такой =)

Просто есть вещи распиаренные, а есть не рекламируемые ;) Взять хотя бы Vue - объективно, уродливый огрызок нокаута, но при этом "в тренде".

Добавлено
Прошу заметить, что я ни слова не сказал, ни про реакт, ни про ангулар и прочие "модные штуки", т.к. в них есть профит, всё зависит от прикладной задачи.

Автор: Астарот 10.01.17, 13:24
Цитата Serafim @
весь майкрософт

Лишний повод насторожится :D

Цитата Serafim @
кусок яндекса

Какой именно, если знаешь?

Цитата Serafim @
Прошу заметить, что я ни слова не сказал, ни про реакт, ни про ангулар и прочие "модные штуки", т.к. в них есть профит, всё зависит от прикладной задачи.

ч0рт, твой профиль угнали, да? :D

Автор: Serafim 10.01.17, 13:37
Цитата Астарот @
Какой именно, если знаешь?

Вроде бы карты =) Год назад у нас доклад даже проводили: https://habrahabr.ru/company/rambler-co/blog/279771/

Добавлено
Цитата Астарот @
ч0рт, твой профиль угнали, да?

Да нет, очевидно, что даже смысла говорить про это нет и так всем всё ясно :crazy:

Автор: Астарот 10.01.17, 13:41
Цитата Serafim @
Вроде бы карты =)

С одной стороны рекомендация! :) А с другой - блин, а чего они такие тормозные? :D

Цитата Serafim @
Да нет, очевидно, что даже смысла говорить про это нет и так всем всё ясно :crazy:
Ну, раньше ты был куда категоричнее :D

Автор: Serafim 10.01.17, 14:17
Цитата Астарот @
Ну, раньше ты был куда категоричнее

Мне крайне не нравится костыли ради костылей. Чуваки сами придумывают себе проблемы и сами выдумывают правила "это сюда, а это сюда, иначе не будет работать". На нокауте можно повторить соглашения и поведение и ангулара, и реакта, и аурелии, вообще кого угодно. Это просто библиотека, которая облегчает самую тяжёлую часть работы - связь V+VM, но обратное невозможно, просто потому что сабжи сдержаны рамками надуманных соглашений и даже правил об именовании переменных (камень в огород первого ангулара).

По-этому я дальше буду продолжать считать, что ничего проще и удобнее:
<{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}>
    class Any {
      blabla = 'lemon squeezy';
    }
     
    class Some {
      message = 'Izi pizi';
      any = new Any;
    }
     
    ko.applyBindings(new Some, app);
     
    //
    <div id="app">{{ message }} {{ any.blabla }}</div>

Никто реализовать не смог (намекаю, что тут ровно одна строчка от нокаута, остальное чистый js).

Так лучше?

Автор: Астарот 10.01.17, 15:38
Цитата Serafim @
Мне крайне не нравится костыли ради костылей. Чуваки сами придумывают себе проблемы и сами выдумывают правила "это сюда, а это сюда, иначе не будет работать". На нокауте можно повторить соглашения и поведение и ангулара, и реакта, и аурелии, вообще кого угодно. Это просто библиотека, которая облегчает самую тяжёлую часть работы - связь V+VM, но обратное невозможно, просто потому что сабжи сдержаны рамками надуманных соглашений и даже правил об именовании переменных (камень в огород первого ангулара).

Фреймворки все же решают еще кучу других задач все же. Связь вьюшки с моделью лишь одна из них. Di, модули, роутинг, фильтры и прочая, прочая, прочая... Конечно это все отбивается микролибами, но на выходе получается винегрет, и получаем туже проблему наоборот - вместо того, что бы знать один фрейм нужно изучить произвольный набор чего поменьше.

Автор: Serafim 10.01.17, 16:21
Ну это да. Я бы с удовольствием обменял нокаут на какой-нибудь вменяемый фрейм. Но, увы, в мире JS таких нет, либо огрызки, реализующие идеально что-то одно, вроде нокаута. Либо костыли, которые много, но через пень-колоду, вроде ануглара или редакса, при этом, сравнивая с фуллстек бекендом - теже самые огрызки. Так что я выбираю именно первый вариант, т.к. это самая сложная часть, разве что за исключением ORM, которых под клиентский JS вообще не существует, тупо потому что "ниасилили". А как работать с беком проксируя сквозь IndexedDB какую-нибудь - уже сам развлекайся.

Добавлено
Фронтэнд - боль

Автор: Астарот 10.01.17, 17:25
Цитата Serafim @
разве что за исключением ORM

Вот уж что предпочитаю избегать - так это orm. Ну его нафиг...

Цитата Serafim @
которых под клиентский JS вообще не существует

Ну, срастить язык с утиной типизацией и данные из БД, имеющие жесткий тип, да еще без третьего промежуточного звена... :) Не уверен, что эту задачу вообще стоит решать.

Цитата Serafim @
Фронтэнд - боль

А где не боль? :) Везде свои боляки, везде свои углы.

Автор: Serafim 10.01.17, 17:44
Цитата Астарот @
Не уверен, что эту задачу вообще стоит решать.

Да ладно, вон под пых и Доктрина, и Пропел, и Элоквинт, и ещё чёрте знает что. Пусть и без утиной типизации язык, но тоже самое скрещивание динамики и строгости. Более того - тот же эктиврекорд вообще жить не может на языках без нормального метапрограммирования.

Цитата Астарот @
А где не боль?

О, есть такие места, куда приходишь просто отдохнуть и получить удовольствие от кода. Но ты ведь всё равно не поверишь, нет? :huh:

Автор: Астарот 10.01.17, 18:11
Цитата Serafim @
О, есть такие места, куда приходишь просто отдохнуть и получить удовольствие от кода. Но ты ведь всё равно не поверишь, нет? :huh:

Так ты скажи где такие :)

Цитата Serafim @
Да ладно, вон под пых и Доктрина, и Пропел, и Элоквинт, и ещё чёрте знает что. Пусть и без утиной типизации язык, но тоже самое скрещивание динамики и строгости. Более того - тот же эктиврекорд вообще жить не может на языках без нормального метапрограммирования.

Ты не забывай, что у пыха нутро вполне себе расширябельное и писано вовсе не на нем же. То есть какой-нибудь PDO как раз по сути и занят тем, что бы "получить из БД и куда-то смапить", и там под капотом все при типах и по-взрослому. А уже полученные данные прокинуть в пых дело техники. В случае с
Цитата Serafim @
ORM, которых под клиентский JS

у тебя такой прослойки по сути нет - БД с одной стороны и не расширябельный js браузера с другой. Эта задача в общем случае не решается вообще, поскольку драйверов к базам в браузер пока никто затащить не додумался :)

Автор: Serafim 10.01.17, 18:52
ты это, полегче, бд уже встроены в браузеры, как минимум две полноценные и две кейвелью, дрова никакие тоже писать не надо, достаточно открыть документацию по js. Но самый профит работы поверх rest, а не с каким-нибудь indexed и доктрина\хибернейт\любая-DDD-way великолепно ложится на это всё наличием репозиториев поверх которых идет выборка. Ближе всех к этому идеальному миру пока что бекбон, имхо

Автор: Астарот 11.01.17, 06:11
Цитата Serafim @
ты это, полегче, бд уже встроены в браузеры, как минимум две полноценные и две кейвелью

Это я здорово отстал от жизни :blink:

Цитата Serafim @
Но самый профит работы поверх rest

rest не нужен :)

Автор: JoeUser 24.09.17, 23:33
Цитата Serafim @
2.5) Ember - уродливый прадедушка ангулара, но зато зашибает всех одним мизинцем

Чисто уточнение. Angular появился в 2009, Ember - в 2011. Как Ember мог стать "дедушкой" Angular'а?
Спрашиваю, т.к. ищу себе годную js-либу (предпочтительней - неперегруженный фрэймворк), вот на эти два выше обратил внимание.

Автор: Serafim 25.09.17, 11:37
Цитата JoeUser @
Чисто уточнение. Angular появился в 2009, Ember - в 2011. Как Ember мог стать "дедушкой" Angular'а?

Разве? Высказывая это, я судил по кодовой базе и примерам, а не годам выпуска. А сама штука похожа некоторыми местами на бекбон, отсюда и такой вывод, что это не современная штука, а что-то из эпохи динозавров. :D

Цитата JoeUser @
предпочтительней - неперегруженный фрэймворк

Фреймов в JS всего три (имеется ввиду фронт): Angular, Ember и Aurelia. Я бы предложил не искать тебе фрейм, а посмотреть в сторону либ, вроде React и/или Vue.

Добавлено
Хотя, думаю, Vue вполне можно назвать микрофреймом, всё же.

Автор: Астарот 25.09.17, 11:51
Цитата Serafim @
посмотреть в сторону либ, вроде React и/или Vue.

Вуй насколько сложен в освоении? Ну, так, на круг.

Автор: Serafim 25.09.17, 12:22
Цитата Астарот @
Вуй насколько сложен в освоении?

Я бы не сказал, там сложнее всего нормально сконфигурить сборку, разобраться в нюансах data-flow и смириться с ограниченностью некоторых возможностей (например, наличием только одного two-way биндинга и черезжопной реализацией computed), проблемы которых решаются другими способами. В остальном - изи.

Добавлено
Как пример можно поиграться с этой шняжкой: https://github.com/LaravelRUS/vue-ui Там и пример есть и сборка готовая, и компоненты вполне самодостаточные. Код мб не идеальный, но разобраться вполне можно.

Автор: Астарот 25.09.17, 12:25
Гуд. А то есть мнение, что нужно будет тут пару-тройку форм слабать по старинке, а чем пользоваться не понятно. Ангуляр какой-то монструозный и нихрена не дружественный стал...

Автор: Serafim 25.09.17, 12:41
Цитата Астарот @
Ангуляр какой-то монструозный и нихрена не дружественный стал...

Ангулар - это фрейм, а ты от него хочешь легковесности =)))) И если первый был довольно лёгким набором либ для разных шняг, объединённых одним DI-контейнером, то 4ка вполне себе гут и может претендовать на самодостаточность.

Если пара-тройки формочек, то да, Vue вообще идеально будет. Плюс у него есть киллер-фича - это нормальная, полноценная эмуляция теневого DOM на дата-атрибутах. Т.е. все стили и рантайм компонентов изолируются и не аффектят соседей, родителей и детей. В угловатом тоже есть такое, но работает через одно место.

Автор: Астарот 25.09.17, 12:56
Цитата Serafim @
Ангулар - это фрейм, а ты от него хочешь легковесности =))))

Понятности и интуитивности :) А он так и не стал интуитивным и стройным.

Цитата Serafim @
то 4ка вполне себе гут и может претендовать на самодостаточность

Только вот ее нужно курить всерьез и надолго, а мне бы тяпляпить нужэно, а не фтыкать неделями :D

Цитата Serafim @
Если пара-тройки формочек, то да, Vue вообще идеально будет

Админка. Жопэ вещует, что ресурс на нее не выделят, придется самому делать, потому что ннннннада :crazy:

Автор: Serafim 25.09.17, 13:07
Цитата Астарот @
Только вот ее нужно курить всерьез и надолго, а мне бы тяпляпить нужэно, а не фтыкать неделями

Так это и с жиквери можно, хренак jq, хренак jqui, километр плагинов и полетела лапша :D

Автор: Астарот 25.09.17, 13:10
Цитата Serafim @
Так это и с жиквери можно, хренак jq, хренак jqui, километр плагинов и полетела лапша :D

Не, ну чо ты сразу, а! :D

Автор: Serafim 25.09.17, 13:20
Ну, допустим, не сразу. Я же медленно готовил тебя к этому, а ты даже и не заметил <_< Только запомни - главное не забрызгать окружающих. ;)

Автор: JoeUser 25.09.17, 16:29
Serafim, а что ты пользуешь в основном, и на какие задачи? На чем рисуешь UI?

Автор: Serafim 26.09.17, 01:33
Цитата JoeUser @
Serafim, а что ты пользуешь в основном, и на какие задачи?

Ни на чём не рисую и ничего не использую (судьба миловала, тьфу-тьфу-тьфу). ;)

Автор: JoeUser 26.09.17, 03:38
А откуда тогда глубина глубин познания по этой теме? :-?

Автор: K313 26.09.17, 11:59
видать жизнь заставила учить много лишнего :rtfm:

Автор: Serafim 26.09.17, 16:35
Та помотало, чот. Да и язык же элементарный, как и "супер-фреймы", что под него фигачат, достаточно что-нибудь набросать на нём по-быстрому, чтобы иметь хотя бы минимальное представление, разве нет? ;)

Powered by Invision Power Board (https://www.invisionboard.com)
© Invision Power Services (https://www.invisionpower.com)