Технологии и паттерны для толстого клиента на JS

@Якобинец · Регистрация: 26.01.2013

Студворк — интернет-сервис помощи студентам

Просьба всем отписаться и сообщить своё мнение по этому поводу. В идеале - ещё сопроводить ссылкой на статью, которая описывает этот вопрос подробнее.
Проблема следующая: мне надо разработать именно web-приложение. При это, его функционал невозможно реализовать тонким клиентом - функционал содержит отрисовку схемы, переключением между панелями иструментов и многое другое. Потому придётся значительно утолщать клиента. Разумеется, все расчёты и вся бизнес логика будет на сервере. Но вот логика представления достаточно сложная.
Стек технологий: MS SQL - EF - Asp.net MVC - JS (возможно использование фреймворков) - HTML5 (отрисовка на Canvas)
Вопрос следующий: реализовывали ли вы паттерны для толского клиента на клиентской стороне (MVP? MVVM?) и какие технологии использовали. В идеале - ещё отписаться про плюсы и минусы.
Всем ответившим респект и уважуха!

@Jetlag · 07.07.2016, 22:18

Якобинец, В общем разумеется самому реализовывать самому mv* разумеется не надо, фреймворки для этого использовать надо.

Пощупать самому можно например здесь http://todomvc.com/, это репа на гитхабе с простыми семплами тудушек на популярных фреймворках.

Что конкретно выбрать - определяется требуемой поддержкой браузера, тем что конкретно хочется видеть из коробки, тем нужен ли например server side rendering, да и вообще тем, что больше нравится. Сейчас очень популярен react, но это можно сказать отдельный подход. Из mvc фреймворков популярны Angular (буэ), Ember, Backbone + что-нибудь (Marionette/Chaplin), vue.js. В сторону Polymer вероятно смотреть еще рано, в сторону knockout уже поздно. А еще есть монстры вроде ExtJs... Перечисленные здесь библиотеки и фреймворки частично пересекаются подходами, в чем-то совсем разные...

Как Вы уже наверное начали понимать, клиентский js славится чертовым зоопарком различных библиотек разной степени хипстерства, здесь нет какого-то true way и "стандартной библиотеки для single page apps", лучший способ - поиграться и взять что понравится. Или что кто-то умеет из команды

@Якобинец · 08.07.2016, 13:42 **[ТС]**

Angular (буэ)

Да, самая холиварная технология - одни превозносят, другие-матерят

@BANO · 08.07.2016, 13:46

Якобинец, мне он не нравится... мне больше react импанирует... вот только проблема в том, что react - библиотека, а angular - готовый фреймворк

@Fedor Vlasenko · 08.07.2016, 21:36

учить псевдо язык typescript
перемудрили здесь Google с typescript
react - это также разрекламированная библиотека
каждое решение задачи требует индивидуального подхода

@BANO · 08.07.2016, 21:45

Poznakomlus, мне реакт не просто так нравится, просто в нём по коду сразу понятно всё, сразу видно
а в ангуляре два мира, контроллеры, записанные в js и html, который как бы и вьюшка и сразу с шаблонами

Добавлено через 3 минуты
да и быстрее ангуляра он в разы...

@Fedor Vlasenko · 08.07.2016, 21:52

веб компоненты когда реализует все это умрет
и есть такое подозрение, что эти гиганты приложили свои лапы для затягивания внедрения технологии вебкомпонентов
для популяризации своих решений

@BANO · 08.07.2016, 22:15

Poznakomlus, это всё конечно хорошо
но если их реализуют, то уйдут фреймворки, но не все
и реакт всё равно быстрее будет

@Fedor Vlasenko · 08.07.2016, 22:39

React — это только представление
каждый должен написать свой шаблонизатор, template, класс document, view
John Resig (создатель jQuery) - template
Snakeskin (язык описания шаблонов) от Кобец Андрея (тут он впереди планеты всей)
mustache - шаблонизатор для большинства популярных языков (очень крут)
до выхода ES6 написал себе micro template

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//author [email]VlasenkoFedor@mail.ru[/email]
String.prototype.render = function (obj) {
    return this.replace(/\{([\w\.]*)\}/g, function (str, key) {
        function getData(keys, obj) {
            var value = obj[keys.shift()];
            if (typeof value === "object") {
                value = getData(keys, value);
            }
            return value;
        }
 
        var keys = key.split("."), value = getData(keys, obj);
        return (typeof value !== "undefined" && value !== null) ? value : '';
    });
};
 
var data = {
    from_user: 'User',
    text: 'Как твои дела?',
    sm: {hi: ':-)'}
};
 
alert("Привет {from_user}!\n{text}\n{sm.hi}".render(data));

Песочница
BANO, ждем ваших решений

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Якобинец 310 / 20 / 2 Регистрация: 26.01.2013 Сообщений: 365

	Технологии и паттерны для толстого клиента на JS 07.07.2016, 13:10. Показов 1284. Ответов 8 Метки нет (Все метки) Просьба всем отписаться и сообщить своё мнение по этому поводу. В идеале - ещё сопроводить ссылкой на статью, которая описывает этот вопрос подробнее. Проблема следующая: мне надо разработать именно web-приложение. При это, его функционал невозможно реализовать тонким клиентом - функционал содержит отрисовку схемы, переключением между панелями иструментов и многое другое. Потому придётся значительно утолщать клиента. Разумеется, все расчёты и вся бизнес логика будет на сервере. Но вот логика представления достаточно сложная. Стек технологий: MS SQL - EF - Asp.net MVC - JS (возможно использование фреймворков) - HTML5 (отрисовка на Canvas) Вопрос следующий: реализовывали ли вы паттерны для толского клиента на клиентской стороне (MVP? MVVM?) и какие технологии использовали. В идеале - ещё отписаться про плюсы и минусы. Всем ответившим респект и уважуха! 0

@Jetlag 111 / 49 / 20 Регистрация: 21.10.2013 Сообщений: 212
	07.07.2016, 22:18
	Якобинец, В общем разумеется самому реализовывать самому mv* разумеется не надо, фреймворки для этого использовать надо. Пощупать самому можно например здесь http://todomvc.com/, это репа на гитхабе с простыми семплами тудушек на популярных фреймворках. Что конкретно выбрать - определяется требуемой поддержкой браузера, тем что конкретно хочется видеть из коробки, тем нужен ли например server side rendering, да и вообще тем, что больше нравится. Сейчас очень популярен react, но это можно сказать отдельный подход. Из mvc фреймворков популярны Angular (буэ), Ember, Backbone + что-нибудь (Marionette/Chaplin), vue.js. В сторону Polymer вероятно смотреть еще рано, в сторону knockout уже поздно. А еще есть монстры вроде ExtJs... Перечисленные здесь библиотеки и фреймворки частично пересекаются подходами, в чем-то совсем разные... Как Вы уже наверное начали понимать, клиентский js славится чертовым зоопарком различных библиотек разной степени хипстерства, здесь нет какого-то true way и "стандартной библиотеки для single page apps", лучший способ - поиграться и взять что понравится. Или что кто-то умеет из команды 1

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	08.07.2016, 13:46
	Якобинец, мне он не нравится... мне больше react импанирует... вот только проблема в том, что react - библиотека, а angular - готовый фреймворк 1

@Fedor Vlasenko 936 / 693 / 236 Регистрация: 01.02.2015 Сообщений: 1,848
	08.07.2016, 21:36
	учить псевдо язык typescript перемудрили здесь Google с typescript react - это также разрекламированная библиотека каждое решение задачи требует индивидуального подхода 2

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	08.07.2016, 21:45
	Poznakomlus, мне реакт не просто так нравится, просто в нём по коду сразу понятно всё, сразу видно а в ангуляре два мира, контроллеры, записанные в js и html, который как бы и вьюшка и сразу с шаблонами Добавлено через 3 минуты да и быстрее ангуляра он в разы... 1

@Fedor Vlasenko 936 / 693 / 236 Регистрация: 01.02.2015 Сообщений: 1,848
	08.07.2016, 21:52
	веб компоненты когда реализует все это умрет и есть такое подозрение, что эти гиганты приложили свои лапы для затягивания внедрения технологии вебкомпонентов для популяризации своих решений 1

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	08.07.2016, 22:15
	Poznakomlus, это всё конечно хорошо но если их реализуют, то уйдут фреймворки, но не все и реакт всё равно быстрее будет 1