js-фреймворки, изучение
От: 00011011  
Дата: 29.04.22 22:04
Оценка:
Поизучав немного написание бэкэнда на go, понял что для реального проекта мне совершенно не хватает знаний по фронтэнду.
Никогда ранее не работал с вебом серьезно, хотя знаю и что такое html, и css, и чистый js. Для каких-то совершенно побочных задач, не являющихся веб-разработкой как таковой, иногда что-то писал, просто гуглил решение и адаптировал его. Разумеется это все было очень примитивно и на уровне технологий 20-летней давности. Хочется для общего развития ознакомиться с современным состоянием дел и возможно поиграть с какими-то примерами, чтобы осознать и проникнуться.

1. Какие задачи решает js-фреймворк? В большинстве случаев сайт — обычная html страница, никакой супер-интерактивности там нет.
Нужен какой-то обзор примеров, что можно сделать реального. Хочется осознать необходимость и полезность фреймворков на конкретных (не искусственных) примерах.
2. С какого фреймворка лучше начать изучение? Посмотрел, вроде есть 4 наиболее популярных и/или перспективных:
react
angular
vue
svelte
Вполне возможно что я просмотрю их все, но с чего лучше начать и в каком порядке изучать? Может что-то еще?
3. Сама схема разработки "написание кода в блокноте" наверное уже давно устарела, и наверняка сейчас есть какие-то инструменты. Как я понял, нужно ставить пакетный менеджер npm, а значит nodejs. Возможно что-то еще?
4. typescript — тоже кажется довольно интересная штука, хочется в процессе ознакомления и ее захватить, тем более что статическая типизация мне гораздо больше нравится чем динамическая. как это сделать лучше всего?
Re: js-фреймворки, изучение
От: vaa https://www.youtube.com/playlist?list=PLtrvASfI1KW7VOYRKjglcagQzWLoxlncl
Дата: 30.04.22 01:26
Оценка: 19 (2)
Здравствуйте, 00011011, Вы писали:


0>1. Какие задачи решает js-фреймворк? В большинстве случаев сайт — обычная html страница, никакой супер-интерактивности там нет.

0>Нужен какой-то обзор примеров, что можно сделать реального. Хочется осознать необходимость и полезность фреймворков на конкретных (не искусственных) примерах.
0>2. С какого фреймворка лучше начать изучение? Посмотрел, вроде есть 4 наиболее популярных и/или перспективных:

0>svelte

+
0>4. typescript — тоже кажется довольно интересная штука, хочется в процессе ознакомления и ее захватить, тем более что статическая типизация мне гораздо больше нравится чем динамическая. как это сделать лучше всего?

https://todomvc.com/

https://github.com/gothinkster/realworld

еще можно посмотреть sutil.dev если нужна строгая типизация.
ну или webassembly движки(тут главное сравнить скорость загрузки, если критично).
и clojure script интересен.
Re: js-фреймворки, изучение
От: vaa https://www.youtube.com/playlist?list=PLtrvASfI1KW7VOYRKjglcagQzWLoxlncl
Дата: 30.04.22 01:28
Оценка:
еще забыл
strong typed elm-lang.org
очень крутая штука. но требует чистоты. эдакий хаскель для веб.
Re[2]: js-фреймворки, изучение
От: 00011011  
Дата: 30.04.22 07:22
Оценка:
Здравствуйте, vaa, Вы писали:

vaa>еще забыл

vaa>strong typed elm-lang.org
vaa>очень крутая штука. но требует чистоты. эдакий хаскель для веб.

Это все наверное для профессионалов, написавших десятки и сотни веб-проектов. У них есть глубокое понимание и чувство структуры и архитектуры того, что они делают — вот они и могут экспериментировать, а что если попробовать чистый ФП или другую экзотику.
А мне нужна точка входа для новичков, имеющих опыт программирования в других областях (не веб). Именно для того чтобы понять и почувствовать эту самую структуру и архитектуру типичных современных веб-проектов, от простого к сложному.
Re: js-фреймворки, изучение
От: Lazytech Ниоткуда  
Дата: 30.04.22 07:42
Оценка:
Здравствуйте, 00011011, Вы писали:

0>1. Какие задачи решает js-фреймворк? В большинстве случаев сайт — обычная html страница, никакой супер-интерактивности там нет.

<...>
0>3. Сама схема разработки "написание кода в блокноте" наверное уже давно устарела, и наверняка сейчас есть какие-то инструменты. Как я понял, нужно ставить пакетный менеджер npm, а значит nodejs. Возможно что-то еще?

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

Вот, например:
Объясните, плиз зачем нужен react и vue? — Хабр Q&amp;A
Re[2]: js-фреймворки, изучение
От: 00011011  
Дата: 30.04.22 09:44
Оценка:
Здравствуйте, Lazytech, Вы писали:

L>Вот, например:

L>Объясните, плиз зачем нужен react и vue? — Хабр Q&amp;A

Там все правильно написано. Но в этом и вопрос.
Программировать я умею, гуглить и копипастить тоже, мне нужна информация совершенно другого рода — какие именно задачи решают профессиональные веб-разработчики, и как именно они их решают с помощью фреймворков. А этого в обучающих статьях почему-то нет.
Re: js-фреймворки, изучение
От: vsb Казахстан  
Дата: 30.04.22 09:54
Оценка: +1
Здравствуйте, 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 — тоже кажется довольно интересная штука, хочется в процессе ознакомления и ее захватить, тем более что статическая типизация мне гораздо больше нравится чем динамическая. как это сделать лучше всего?


Я бы не советовал распыляться, для начала освой реакт, а потом уже отдельно портируй своё приложение на тайпскрипт. Не знаю, как сделать лучше всего, но ресурсов для погружения море. Я бы начал с официального сайта.
Re[2]: js-фреймворки, изучение
От: bnk СССР http://unmanagedvisio.com/
Дата: 30.04.22 18:35
Оценка: +1
Здравствуйте, vsb, Вы писали:

0>>1. Какие задачи решает js-фреймворк? В большинстве случаев сайт — обычная html страница, никакой супер-интерактивности там нет.


vsb>Во-первых получение данных от сервера и отображение этих данных пользователю, во-вторых обработка действий пользователя и отсылка данных на сервер при необходимости.


Я думаю можно более глобально сказать — фреймворки увеличивают производительность труда программиста, и он может производить больше полезных вещей в единицу времени
Но завист от проекта конечно. Одно дело — программа типа hello world, а другое — microsoft word (редактор в смысле)

vsb>React, остальное минорщина.


vue хоть и не такая популярная как react, но концептуально чище imho.
Хотя "есть два вида языков — те, которые все ненавидят, и те, которые никто не использует". Впрочем, vue вполне используется на обычных сайтах, просто не в тех объемах, что реакт.
Насколько я знаю, на реакте например Microsoft Office работает (который 365).

0>>4. typescript — тоже кажется довольно интересная штука, хочется в процессе ознакомления и ее захватить, тем более что статическая типизация мне гораздо больше нравится чем динамическая. как это сделать лучше всего?


vsb>Я бы не советовал распыляться, для начала освой реакт, а потом уже отдельно портируй своё приложение на тайпскрипт. Не знаю, как сделать лучше всего, но ресурсов для погружения море. Я бы начал с официального сайта.


Проще всего создавать приложение сразу с поддержкой тайпскрипта. Для реакт вроде замена одного слова при создании нового приложения.
У тайпскрипта него есть непобедимый плюс — работающий интелисенс и нормальные ошибки времени компиляции, что в целом довольно критично.
Re[3]: js-фреймворки, изучение
От: vaa https://www.youtube.com/playlist?list=PLtrvASfI1KW7VOYRKjglcagQzWLoxlncl
Дата: 01.05.22 00:36
Оценка:
Здравствуйте, 00011011, Вы писали:

0>Здравствуйте, vaa, Вы писали:


vaa>>еще забыл

vaa>>strong typed elm-lang.org
vaa>>очень крутая штука. но требует чистоты. эдакий хаскель для веб.

0>Это все наверное для профессионалов, написавших десятки и сотни веб-проектов. У них есть глубокое понимание и чувство структуры и архитектуры того, что они делают — вот они и могут экспериментировать, а что если попробовать чистый ФП или другую экзотику.

0>А мне нужна точка входа для новичков, имеющих опыт программирования в других областях (не веб). Именно для того чтобы понять и почувствовать эту самую структуру и архитектуру типичных современных веб-проектов, от простого к сложному.

для самым простым и удобным оказался svelte + typescript. у них есть уже готовый каракас sapper
рекомендую. в связке с vscode.

elm вообще простой как две копейки. там только понять работу портов(взаимодействие с внешним миром).

но у всех этих подходов есть очевидная проблема. нужно все время следить за актуальностью клиента.
стоит что-то исправить на сервере, как клиент может незаметно перестать работать.
поэтому конечно в ближайшем будущем всеже будет уход в сторону вебассембли или траспайлеров типа Fable Sutil
практически бесшовная интеграция клиента и сервера.
кодить намного проще.
Re[3]: js-фреймворки, изучение
От: paradok  
Дата: 04.05.22 10:16
Оценка:
Здравствуйте, 00011011, Вы писали:

0>Здравствуйте, Lazytech, Вы писали:


L>>Вот, например:

L>>Объясните, плиз зачем нужен react и vue? — Хабр Q&amp;A

0>Там все правильно написано. Но в этом и вопрос.

0>Программировать я умею, гуглить и копипастить тоже, мне нужна информация совершенно другого рода — какие именно задачи решают профессиональные веб-разработчики, и как именно они их решают с помощью фреймворков. А этого в обучающих статьях почему-то нет.

по ссылке описание такого проекта — todo_list
запрограммируй его на голом html+css+js
поймешь проблематику.
Ну или дашбоард типа курс акции валюты и тд.

по фреймворкам — обещали много крутых бесплатных компонент...на практике их немного, не крутые, а бывает и за деньги...
компонент имхо давно и на html можно, теневой DOM давно уже из коробки, стилизация стандартных компонент тоже давно есть
имхо фреймворки уже сильно отстали от html, они там все еще на флекс-бокс верстают, а голый html давно уже на гридах и обсерверах,
а на голом css игры пишут без js — этого всего нет во фрейворках, они = старье.
Отредактировано 04.05.2022 10:18 paradok . Предыдущая версия .
Re[3]: js-фреймворки, изучение
От: paradok  
Дата: 04.05.22 13:44
Оценка: 117 (1) +1
Здравствуйте, 00011011, Вы писали:

0>Здравствуйте, Lazytech, Вы писали:


L>>Вот, например:

L>>Объясните, плиз зачем нужен react и vue? — Хабр Q&amp;A

0>Там все правильно написано. Но в этом и вопрос.

0>Программировать я умею, гуглить и копипастить тоже, мне нужна информация совершенно другого рода — какие именно задачи решают профессиональные веб-разработчики,
и как именно они их решают с помощью фреймворков. А этого в обучающих статьях почему-то нет.


я как-то делал игру типа рулетки на js и фреймворки так и не придумал куда вставить.
GUI и взаимодействие в пользователем было довольно сложное,
состояние игры залогиненного пользователя хранилось в базе на сервере и в локальной базе,
после делания ставки игроком (пальцем фишки из своего угла расставлял по полю на экране Андроида или ай-фона),
и запуска рулетки состояние игрового поля отправлялось на сервер
и возвращалось с сервера выпавшее число, новое состояние игрового поля и баланс счета игрока,
у игрока делалось разная анимация — выиграл — проиграл — обновление баланса.
Также можно было играть на автомате до исчерпания счета или N раз, показ истории игр, демо режим без расхода денег со счета и отдельный демо счет.
Все сделал чисто на DOM и чистом js — куда тут всунуть react так и не придумал.
(однако использовал теневой DOM и компонент Таблица с прокруткой для отображения истории игр, автоматическая адаптация к размеру экрана с сокрытием некоторых элементов
для маленьких экранов, анимация на css, кручение и выпадение на WebGL — математика не очень сложная но трюковая
то число которое выпадет получает с сервера, а сам процесс кручения и выпадения должен выглядеть для игрока 100% случайным,
но выпадать должно именно то число что получено с сервера,
было и много разных звуковых эффектов на JS)
Отредактировано 04.05.2022 14:05 paradok . Предыдущая версия . Еще …
Отредактировано 04.05.2022 14:01 paradok . Предыдущая версия .
Отредактировано 04.05.2022 13:58 paradok . Предыдущая версия .
Отредактировано 04.05.2022 13:55 paradok . Предыдущая версия .
Отредактировано 04.05.2022 13:49 paradok . Предыдущая версия .
Отредактировано 04.05.2022 13:46 paradok . Предыдущая версия .
Re[4]: js-фреймворки, изучение
От: paradok  
Дата: 04.05.22 13:45
Оценка:
Отредактировано 04.05.2022 13:48 paradok . Предыдущая версия .
Re[4]: js-фреймворки, изучение
От: vaa https://www.youtube.com/playlist?list=PLtrvASfI1KW7VOYRKjglcagQzWLoxlncl
Дата: 05.05.22 02:36
Оценка:
Здравствуйте, paradok, Вы писали:

P>Здравствуйте, 00011011, Вы писали:


0>>Здравствуйте, Lazytech, Вы писали:


L>>>Вот, например:

L>>>Объясните, плиз зачем нужен react и vue? — Хабр Q&amp;A

0>>Там все правильно написано. Но в этом и вопрос.

0>>Программировать я умею, гуглить и копипастить тоже, мне нужна информация совершенно другого рода — какие именно задачи решают профессиональные веб-разработчики,
P>и как именно они их решают с помощью фреймворков. А этого в обучающих статьях почему-то нет.

Задачи разные как и у вас, а фреймворки лишь помогают разбивать ui на компоненты, по принципу лего. в остальном как и другие фрэймворки обеспечивают инфраструктурные вещи, типа авторизации и т.п.
по описанию вашей задачи вам действительно это не зачем.
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.