javascript frontend level up

тоже что и любому программисту по вопросам организации кода и рефакторингу, очевидно же

Ты определись, либо и дальше сиди в 2012 со своим jquery и bootstrap, либо изучай современные инструменты, такие как vue.js, flexbox и css grid уже завезли этой весной. А ведь ещё es6, es7 и т.д. А эти всякие бутстрапы с jquery, уже прошлый век.

волею судьбы вынужденным говнокодить на javascriptе SPA

Какие все привереды. Не хош - не пиши. Рабство отменили недавно

Начни с идей Backbone, потом подключай Knockout, так поймешь суть React/Angular/Vue, обычно сейчас на компоненты ровняются. Изменять по селектору не так уж плохо, принято делать this.$title = this.el.querySelector(".title") и дальше в коде this.$title.innerText =, часто применяют декларативные биндинги, и поля моделей рендерятся на плейсхолдерах. У вас все впереди, главное процесс не останавливать, все начали с лапши.

Лично я пользуюсь React, и Redux, но вам это со старта может овер-усложненным показаться, знаком с elm-lang и очень нравится, но в продакшене не использую. Для расширения кругозора тоже можно ознакомится. jQuery сейчас уже не в почете, vanilla рулит.

Я плюнул и взялся за typescript. Вся лапша сразу порезалась.

чего почитать

https://github.com/getify/You-Dont-Know-JS

ченить из современности

https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-201...

После беглого взгляда меня в react'е смущает html лапша в js. Нельзя ли всякий гуй сразу в страницу захаркодить, а потом дергать по мере надобности? Ну а vue (из их hello world примера) похож на шаблонизатор. Только данные уже забиваются в страничку на сервер сайде. Мне чисто с ними потом работать надо ну и формочку обработать или попап какой показать. Как бывший активный пользователь extjs2 очень рад что ванильный js побеждает всякие костыли.

typescript костыль же, не? Но идея мне нравиться.

ReactJS, BEM

Отлично! Буду читать, особенно YDKJS.

Если серьезно, на JavaScript ВСЁ делается только костылями.
Если я их хотя бы не буду видеть, это того стоит.
Поставил в эклипс Typescript.java, настроил компиляцию при сохранении, красота. Код сразу перестал быть лапшой, навигация, подсказки, единообразие с большинством ЯП (классы, public/private, модули, async/await и нет ехал-прлмис-через-промис) Для реакта (и не только) есть TSX.

После беглого взгляда меня в react'е смущает html лапша в js. Нельзя ли всякий гуй сразу в страницу захаркодить, а потом дергать по мере надобности?

Суть JSX в том, что это — JS, а не HTML.

Идея делать гуй на HTML — так себе: HTML неудобен уже для описания обработчиков event'ов, не говоря о чём-нибудь сложном. В некоторых фреймворках пользуют Тьюринг-полные шаблонизаторы, «напоминающие html» (в самых запущенных случаях вроде angular2 в фреймворк встроен парсер своего типа-html диалекта вместо того, чтобы пользовать браузерный. Да, оно реально такое большое).

/me вовремя свалил из этой сферы ;))

Куда?)

HTML неудобен уже для описания обработчиков event'ов

Так, скажи мне, в общих случаях нафига тащить обработчики в HTML, если достаточно #id? Более того, по MVC можно накидать по аттрибутам модели этих id, автоматически генерируя шаблон на сервере по модели из DB.
JSX, ЕМНИП, таки эталонный костыль, чтобы не шатать тормозной DOM лишний раз. Если бы DOM не тормозил при модификации состояний элементов и добавлении/убирании - никто бы в здравом уме JSX не форсил.
В данном контексте «костыль» в позитивном ключе, если что.

разбирайся дальше, это не лапша вовсе, позже поймешь. код в реакте к верстке отношения не имеет.

нафига тащить обработчики в HTML, если достаточно #id? Более того, по MVC можно накидать по аттрибутам модели этих id, автоматически генерируя шаблон на сервере по модели из DB.

Чтобы сервер на каждый чих не дёргать, не?

Это всего лишь удобный способ работать с VirtualDOM. А VirtualDOM умеет в компоненты, в том числе и в анонимные (можно прямо в JSX вернуть компонент из любой функции прямо в тэге)

BEM, git, reactJS, ES6, webpack, typeScript, flexbox

Кстати, да. https://medium.com/@housecor/react-s-jsx-the-other-side-of-the-coin-2ace7ab62b98 сравнительно ок.

нафига тащить обработчики в HTML, если достаточно #id?

Нафига тащить id в HTML при том, что он будет тесно связан с тонной JS-кода? Потому, что так «красивее»? Кому?

автоматически генерируя шаблон на сервере по модели из DB

На стороне сервера слишком мало данных чтобы даже нормально локализовать современное js-приложение (он не имеет понятия о числах для ngettext'а, например). Серверный рендеринг в таких условиях нужен разве что для пререндеринга начального состояния, причём тем же кодом, что и в браузере.

нормально локализовать современное js-приложение

Зависит от задач. У меня js код занимается виджетами ui и незаметной подгрузкой данных в json, ему локализация монопиносуальна.

причём тем же кодом, что и в браузере.

мне показалось легче тем же кодом (почти), что и в orm. Натягивать глаз на ж яваскриптовые события ui на rdbms (или наоборот) - увольте-с.

Потому, что так «красивее»? Кому?

верстальщику же! Dreamwaver forever!

Где гарантии того, что верстальщик не сломает какой-нибудь из селекторов в js-коде?

Верстальщики без знания JS могут скоро вымереть.

Сломать id в html на порядки сложнее, чем пролюбить что-нибудь в JavaScript. Да, яваскрипт - самый тонизирующий язык...

Сломать id?) Легко )

Работаю с парсингом чужих сайтов. Постоянно встречаюсь с тем, что на одной странице несколько элементов имеют один id:

<div id="main">
foo
</div>

<div id="main">
bar
</div>

Сколько же у тебя id в этом html? И как ты делаешь роутинг?

что на одной странице несколько элементов имеют один id:

id в html не обязан быть уникальным. так что ничего такого в этом нет.

ng-route, не более 20 id на view, каждый view - шаблон, сгенеренный wtforms . В свойствах полей - параметры валидации, jinja2 макросы делают по форме поля для angularjs.
В итоге в конкретный момент кроме на странице мало элементов.

id в html не обязан быть уникальным. так что ничего такого в этом нет.

А мужуки-то не знают!..

https://www.w3.org/TR/html401/struct/global.html#adef-id

This attribute assigns a name to an element. This name must be unique in a document.

Шаблоны пишут шаблоны? Это ж верный способ получить себе пачку xss.

Каким образом? Для SPA все шаблоны выглядят статическими, а на сервере все модели жёстко описаны.

Каким образом? Для SPA все шаблоны выглядят статическими

Ни разу. Шаблоны могут почти всё, что может JS, а ангуляровские — вообще всё и джанга (как и jinja2) не умеют их эскейпить.

https://github.com/angular/angular.js/issues/5601 конкретно ангуляр. Этот баг НЕ решён потому, что его решить НЕВОЗМОЖНО.

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

И ты вообще никаких введённых юзерами данных не передаёшь в темплейты? Тогда ок.

Только ng-init из заполненной базы (это важно, чтобы [object.object] не видеть). Я проверю, чтобы там служебные символы принудительно вырезались. Ну или тупо ng-init=«» оставлю.