Поизучав немного написание бэкэнда на go, понял что для реального проекта мне совершенно не хватает знаний по фронтэнду.
Никогда ранее не работал с вебом серьезно, хотя знаю и что такое html, и css, и чистый js. Для каких-то совершенно побочных задач, не являющихся веб-разработкой как таковой, иногда что-то писал, просто гуглил решение и адаптировал его. Разумеется это все было очень примитивно и на уровне технологий 20-летней давности. Хочется для общего развития ознакомиться с современным состоянием дел и возможно поиграть с какими-то примерами, чтобы осознать и проникнуться.
1. Какие задачи решает js-фреймворк? В большинстве случаев сайт — обычная html страница, никакой супер-интерактивности там нет.
Нужен какой-то обзор примеров, что можно сделать реального. Хочется осознать необходимость и полезность фреймворков на конкретных (не искусственных) примерах.
2. С какого фреймворка лучше начать изучение? Посмотрел, вроде есть 4 наиболее популярных и/или перспективных:
react
angular
vue
svelte
Вполне возможно что я просмотрю их все, но с чего лучше начать и в каком порядке изучать? Может что-то еще?
3. Сама схема разработки "написание кода в блокноте" наверное уже давно устарела, и наверняка сейчас есть какие-то инструменты. Как я понял, нужно ставить пакетный менеджер npm, а значит nodejs. Возможно что-то еще?
4. typescript — тоже кажется довольно интересная штука, хочется в процессе ознакомления и ее захватить, тем более что статическая типизация мне гораздо больше нравится чем динамическая. как это сделать лучше всего?
0>1. Какие задачи решает js-фреймворк? В большинстве случаев сайт — обычная html страница, никакой супер-интерактивности там нет. 0>Нужен какой-то обзор примеров, что можно сделать реального. Хочется осознать необходимость и полезность фреймворков на конкретных (не искусственных) примерах. 0>2. С какого фреймворка лучше начать изучение? Посмотрел, вроде есть 4 наиболее популярных и/или перспективных:
0>svelte
+ 0>4. typescript — тоже кажется довольно интересная штука, хочется в процессе ознакомления и ее захватить, тем более что статическая типизация мне гораздо больше нравится чем динамическая. как это сделать лучше всего?
еще можно посмотреть sutil.dev если нужна строгая типизация.
ну или webassembly движки(тут главное сравнить скорость загрузки, если критично).
и clojure script интересен.
Здравствуйте, vaa, Вы писали:
vaa>еще забыл vaa>strong typed elm-lang.org vaa>очень крутая штука. но требует чистоты. эдакий хаскель для веб.
Это все наверное для профессионалов, написавших десятки и сотни веб-проектов. У них есть глубокое понимание и чувство структуры и архитектуры того, что они делают — вот они и могут экспериментировать, а что если попробовать чистый ФП или другую экзотику.
А мне нужна точка входа для новичков, имеющих опыт программирования в других областях (не веб). Именно для того чтобы понять и почувствовать эту самую структуру и архитектуру типичных современных веб-проектов, от простого к сложному.
Здравствуйте, 00011011, Вы писали:
0>1. Какие задачи решает js-фреймворк? В большинстве случаев сайт — обычная html страница, никакой супер-интерактивности там нет.
<...> 0>3. Сама схема разработки "написание кода в блокноте" наверное уже давно устарела, и наверняка сейчас есть какие-то инструменты. Как я понял, нужно ставить пакетный менеджер npm, а значит nodejs. Возможно что-то еще?
Наверное, только за последние пару лет ответы на подобные вопросы давались сотни раз в самых разных статьях.
Там все правильно написано. Но в этом и вопрос.
Программировать я умею, гуглить и копипастить тоже, мне нужна информация совершенно другого рода — какие именно задачи решают профессиональные веб-разработчики, и как именно они их решают с помощью фреймворков. А этого в обучающих статьях почему-то нет.
Здравствуйте, 00011011, Вы писали:
0>1. Какие задачи решает js-фреймворк? В большинстве случаев сайт — обычная html страница, никакой супер-интерактивности там нет.
Во-первых получение данных от сервера и отображение этих данных пользователю, во-вторых обработка действий пользователя и отсылка данных на сервер при необходимости.
0>Нужен какой-то обзор примеров, что можно сделать реального. Хочется осознать необходимость и полезность фреймворков на конкретных (не искусственных) примерах.
Не понимаю вопроса. Весь современный веб сейчас на фреймворках, ходи по сайтам и увидишь, что можно сделать реального.
0>2. С какого фреймворка лучше начать изучение? Посмотрел, вроде есть 4 наиболее популярных и/или перспективных: 0>react 0>angular 0>vue 0>svelte 0>Вполне возможно что я просмотрю их все, но с чего лучше начать и в каком порядке изучать? Может что-то еще?
React, остальное минорщина.
0>3. Сама схема разработки "написание кода в блокноте" наверное уже давно устарела, и наверняка сейчас есть какие-то инструменты. Как я понял, нужно ставить пакетный менеджер npm, а значит nodejs. Возможно что-то еще?
npm, vscode для начала, дальше по обучающим видео.
0>4. typescript — тоже кажется довольно интересная штука, хочется в процессе ознакомления и ее захватить, тем более что статическая типизация мне гораздо больше нравится чем динамическая. как это сделать лучше всего?
Я бы не советовал распыляться, для начала освой реакт, а потом уже отдельно портируй своё приложение на тайпскрипт. Не знаю, как сделать лучше всего, но ресурсов для погружения море. Я бы начал с официального сайта.
Здравствуйте, vsb, Вы писали:
0>>1. Какие задачи решает js-фреймворк? В большинстве случаев сайт — обычная html страница, никакой супер-интерактивности там нет.
vsb>Во-первых получение данных от сервера и отображение этих данных пользователю, во-вторых обработка действий пользователя и отсылка данных на сервер при необходимости.
Я думаю можно более глобально сказать — фреймворки увеличивают производительность труда программиста, и он может производить больше полезных вещей в единицу времени
Но завист от проекта конечно. Одно дело — программа типа hello world, а другое — microsoft word (редактор в смысле)
vsb>React, остальное минорщина.
vue хоть и не такая популярная как react, но концептуально чище imho.
Хотя "есть два вида языков — те, которые все ненавидят, и те, которые никто не использует". Впрочем, vue вполне используется на обычных сайтах, просто не в тех объемах, что реакт.
Насколько я знаю, на реакте например Microsoft Office работает (который 365).
0>>4. typescript — тоже кажется довольно интересная штука, хочется в процессе ознакомления и ее захватить, тем более что статическая типизация мне гораздо больше нравится чем динамическая. как это сделать лучше всего?
vsb>Я бы не советовал распыляться, для начала освой реакт, а потом уже отдельно портируй своё приложение на тайпскрипт. Не знаю, как сделать лучше всего, но ресурсов для погружения море. Я бы начал с официального сайта.
Проще всего создавать приложение сразу с поддержкой тайпскрипта. Для реакт вроде замена одного слова при создании нового приложения.
У тайпскрипта него есть непобедимый плюс — работающий интелисенс и нормальные ошибки времени компиляции, что в целом довольно критично.
Здравствуйте, 00011011, Вы писали:
0>Здравствуйте, vaa, Вы писали:
vaa>>еще забыл vaa>>strong typed elm-lang.org vaa>>очень крутая штука. но требует чистоты. эдакий хаскель для веб.
0>Это все наверное для профессионалов, написавших десятки и сотни веб-проектов. У них есть глубокое понимание и чувство структуры и архитектуры того, что они делают — вот они и могут экспериментировать, а что если попробовать чистый ФП или другую экзотику. 0>А мне нужна точка входа для новичков, имеющих опыт программирования в других областях (не веб). Именно для того чтобы понять и почувствовать эту самую структуру и архитектуру типичных современных веб-проектов, от простого к сложному.
для самым простым и удобным оказался svelte + typescript. у них есть уже готовый каракас sapper
рекомендую. в связке с vscode.
elm вообще простой как две копейки. там только понять работу портов(взаимодействие с внешним миром).
но у всех этих подходов есть очевидная проблема. нужно все время следить за актуальностью клиента.
стоит что-то исправить на сервере, как клиент может незаметно перестать работать.
поэтому конечно в ближайшем будущем всеже будет уход в сторону вебассембли или траспайлеров типа Fable Sutil
практически бесшовная интеграция клиента и сервера.
кодить намного проще.
Здравствуйте, 00011011, Вы писали:
0>Здравствуйте, Lazytech, Вы писали:
L>>Вот, например: L>>Объясните, плиз зачем нужен react и vue? — Хабр Q&A
0>Там все правильно написано. Но в этом и вопрос. 0>Программировать я умею, гуглить и копипастить тоже, мне нужна информация совершенно другого рода — какие именно задачи решают профессиональные веб-разработчики, и как именно они их решают с помощью фреймворков. А этого в обучающих статьях почему-то нет.
по ссылке описание такого проекта — todo_list
запрограммируй его на голом html+css+js
поймешь проблематику.
Ну или дашбоард типа курс акции валюты и тд.
по фреймворкам — обещали много крутых бесплатных компонент...на практике их немного, не крутые, а бывает и за деньги...
компонент имхо давно и на html можно, теневой DOM давно уже из коробки, стилизация стандартных компонент тоже давно есть
имхо фреймворки уже сильно отстали от html, они там все еще на флекс-бокс верстают, а голый html давно уже на гридах и обсерверах,
а на голом css игры пишут без js — этого всего нет во фрейворках, они = старье.
Здравствуйте, 00011011, Вы писали:
0>Здравствуйте, Lazytech, Вы писали:
L>>Вот, например: L>>Объясните, плиз зачем нужен react и vue? — Хабр Q&A
0>Там все правильно написано. Но в этом и вопрос. 0>Программировать я умею, гуглить и копипастить тоже, мне нужна информация совершенно другого рода — какие именно задачи решают профессиональные веб-разработчики,
и как именно они их решают с помощью фреймворков. А этого в обучающих статьях почему-то нет.
я как-то делал игру типа рулетки на js и фреймворки так и не придумал куда вставить.
GUI и взаимодействие в пользователем было довольно сложное,
состояние игры залогиненного пользователя хранилось в базе на сервере и в локальной базе,
после делания ставки игроком (пальцем фишки из своего угла расставлял по полю на экране Андроида или ай-фона),
и запуска рулетки состояние игрового поля отправлялось на сервер
и возвращалось с сервера выпавшее число, новое состояние игрового поля и баланс счета игрока,
у игрока делалось разная анимация — выиграл — проиграл — обновление баланса.
Также можно было играть на автомате до исчерпания счета или N раз, показ истории игр, демо режим без расхода денег со счета и отдельный демо счет.
Все сделал чисто на DOM и чистом js — куда тут всунуть react так и не придумал.
(однако использовал теневой DOM и компонент Таблица с прокруткой для отображения истории игр, автоматическая адаптация к размеру экрана с сокрытием некоторых элементов
для маленьких экранов, анимация на css, кручение и выпадение на WebGL — математика не очень сложная но трюковая
то число которое выпадет получает с сервера, а сам процесс кручения и выпадения должен выглядеть для игрока 100% случайным,
но выпадать должно именно то число что получено с сервера,
было и много разных звуковых эффектов на JS)
Здравствуйте, paradok, Вы писали:
P>Здравствуйте, 00011011, Вы писали:
0>>Здравствуйте, Lazytech, Вы писали:
L>>>Вот, например: L>>>Объясните, плиз зачем нужен react и vue? — Хабр Q&A
0>>Там все правильно написано. Но в этом и вопрос. 0>>Программировать я умею, гуглить и копипастить тоже, мне нужна информация совершенно другого рода — какие именно задачи решают профессиональные веб-разработчики, P>и как именно они их решают с помощью фреймворков. А этого в обучающих статьях почему-то нет.
Задачи разные как и у вас, а фреймворки лишь помогают разбивать ui на компоненты, по принципу лего. в остальном как и другие фрэймворки обеспечивают инфраструктурные вещи, типа авторизации и т.п.
по описанию вашей задачи вам действительно это не зачем.
