1

Тема: Порадьте стек для JavaScript

Ви мене знаєте, я зовсім не програміст, а маркетинг-спеціаліст.

Втім давно зацікавився кодом, вчив Рубі й маю ідею проекту на Рубі, який загалом вже зможу реалізувати. Однак коли відкрив для себе Джаваскрипт, то мені закортіло займатися технологіями саме цієї мови

Прихований текст

так, пан знається на збоченнях.


Що я і почав робити.

Спершу розібрався з ванільним js. Це було весело.

На вихідних зробив статичний сайт (вірніше сайту прототип) з Express.js + Bootstrap.

Вчора почав занурюватися в Реакт, невдовзі спробую написати щось односторінкове.

Мій ґітгаб, аби ви розуміли мій скромний рівень: https://github.com/bebyx

Прошу поради по стеку - я так розумію, з моїми вподобаннями це має бути щось на штиб MERN - і навчальних матеріалів, які би зразу навчали всьому стеку в зв'язці (можна платних).

За поради по практиці теж буду вдячний. Наприклад, зробити спершу динамічний сайт з Експресом, а потім вже лізти у фронтендові фреймворки. Чи, скажімо, відмовитися від ідеї писати ДжС-бекенд і робити проект вже зараз із дружнім і комфортним РоРом. Я відкритий до будь-яких коментарів

Прихований текст

крім нацистських і комуністичних.

Подякували: leofun011

2

Re: Порадьте стек для JavaScript

GTK+.

3

Re: Порадьте стек для JavaScript

javascriptIsLife написав:

GTK+.

Почитав. Прикольно, звісно, але не схоже на те, що я просив.

Подякували: leofun011

4

Re: Порадьте стек для JavaScript

Як будете мати час, то гляньте на Node.JS. Не те щоб я вас закликав його використовувати, а просто щоб знати, що таке буває.

Подякували: leofun011

5

Re: Порадьте стек для JavaScript

Torbins написав:

Як будете мати час, то гляньте на Node.JS. Не те щоб я вас закликав його використовувати, а просто щоб знати, що таке буває.

Так я ж і глянув. Спершу побавив чистий NodeJS, а потім зробив статичний сайтик з його найпопулярнішим фреймворком Express.js.

Дуже незвично після Рейок.

6

Re: Порадьте стек для JavaScript

я був теж трішки писав на express, але особливого досвіду не маю, тому багато не пораджу, з реактом взагалі не працював, тому й тут нічого не пораджу, можу лише допомагати з ванількою, тому що останні кілька місяців кулупав її вздовж і впоперек (і ще з rxjs можу допомогти, якщо треба буде, та пояснити за redux)

Подякували: bebyk1

7

Re: Порадьте стек для JavaScript

FakiNyan написав:

пояснити за redux

Багато разів зустрічав у текстах по js як згадують цю технологію, але толком не розумію, що це. Припускаю, бо не зовсім ще втямив концепцію станів (states), про які втім вже почитав у туторіалі Реакту.

8

Re: Порадьте стек для JavaScript

bebyk написав:
FakiNyan написав:

пояснити за redux

Багато разів зустрічав у текстах по js як згадують цю технологію, але толком не розумію, що це. Припускаю, бо не зовсім ще втямив концепцію станів (states), про які втім вже почитав у туторіалі Реакту.

Основна суть в тому, що у вас є об'єкт, котрий представляє собою поточний стан речей в додатку.
Коли вам потрібно зробити якісь зміни, то ви відправляєте повідомлення по типу "змінити значення такого-то поля на таке-то значення", а з іншої сторони у вас є селектори, котрими ви можете отримувати потрібні поля з того об'єкту.
Наприклад, ви хочете завантажити список юзерів, і відобразити їхні імена у вигляді списку, а поки вони завантажуються - потрібно показати спінер, котрий індикує, що ото воно у вас завантажується там.
Стан може бути представленим ось так

{
 users: null,
 isLoading: false
}

Тепер ви викликаєте метод, котрий робе те, що вам треба, і цей метод може виглядати якось так

async function fetchUsers() {
 store.set('isLoading', true);
 const users = await httpService.fetchUsers();
 store.set('isLoading', false);
 store.set('users', users);
}

тобто, спочатку воно каже - крути спінера, потім воно завантажує юзерів, і в цей час спінер крутиться, потім воно закінчило завантажувати юзерів, ми кажемо - спінер більш не тре, і далі ми зберігаємо юзерів в об'єкті, що містить поточний стан додатку.

В методі

set

ви вже якось дивитесь, яке там поле треба змінити, і на яке значення, і змінюєте їх через створення нового об'єкту, наприклад

function(field, value) {
 state = {...state, [field]: value};
}

коли зміни відбуваються - ви повідомлеєте всіх зацікавлених в цих змінах передаючи об'єкт стану.
Найпростіше, про що я можу подумати - це створити масив таких функцій.
Спочатку ви їх реєструєте (додаєте в масив), і коли стан змінюється, ви просто проходите  по всім зареєстрованим функціям і викликаєте їх передаючи стан, як аргумент, а функції вже витягують зі стану те, що їх цікавить.

function iWantUsers(state) {
 const users = state.users; // отримали
 // а тут вже йде код, котрий рендерить тих юзерів на сторінці
}

Це все дуже-дуже спрощено, тому що там є ціла хвілософія з екшнами, сайд-ефектами, сінгл соурсом оф трус та імютабіліті, але головна ідея саме така.

Подякували: bebyk, ostap34PHP, leofun013

9

Re: Порадьте стек для JavaScript

FakiNyan,

Дякую, друже. Ніби розумію, а ніби й не до кінця. Мені ще треба над цим помізкувати, а ще краще - руцями зробити, на практиці я ліпше вчуся.

10 Востаннє редагувалося ExPy (29.07.2020 23:25:08)

Re: Порадьте стек для JavaScript

UR_NAZ цар i бог цього форуму.
Порошенко найкращий президент.
Вибачте мене люди.

11

Re: Порадьте стек для JavaScript

ExPy написав:

А що скажете за jQuery ? Його ще використовують?

В основному на support projects.

12

Re: Порадьте стек для JavaScript

На вашому місці, якби тільки починав, я почав би з фронтенду, і лише коли себе почував би більш впевненим, почав би вчити бекенд.
Щодо стеку (з огляду на те, з чим ви уже почали розбиратися):
- html, css + препроцесори (sass/less), bootstrap якщо хочете щоб було симпатиченьким з найменшими зусиллями для початку, але необов'язково
- React (спочатку тільки його, далі в Redux ще розібратися)
- уміти конфігурувати webpack (в тому числі налаштування для дев/прода, лоадер картинок, cтилів і т.д.)
- паралельно до цього всього підтягувати мову (те, про що ви казали "ванільний js", в плані конструкцій і просто щоб почували себе впевненим з es2015+), функціональні штучки всякі (типу find, filter, reduce, map і т.д.) - звучить просто, але для того, щоб почувати себе дійсно впевненим знадобиться час, jsx
- пізніше: тестування (jest, mocha і т.д.)

Почуватимете себе впевнено з фронтендом, тоді можна буде перейти до бекенду -  typescript, node.js, express і т.д.
Але я б не поспішав би - паралельно дві концепції в голові важко утримувати (фронтенд/бекенд).

Щодо ресурсів:
- Для реакту - офіційна документація, вона розбита по рівнях, доволі зручно. Тобто, починаєте з першого рівня ("Основні поняття"): https://uk.reactjs.org/docs/hello-world.html, потім "Просунуті теми". Зразу jsx, не створюйте елементів вручну - практичного застосування не має.
- Трохи пізніше: Книга Michele Bertoli "React Design Patterns and Best Practices" https://www.amazon.com/React-Design-Pat … B01LFAN88E (це уже на рівень вище, це вже не просто "писати код", а "писати правильно")
- Ще трохи матеріалів: https://github.com/enaqx/awesome-react Взагалі ось вам хитрість: шукаєте на гітхабі репозиторій "awesome ***", де *** - технологія, які хочете вивчити, і ознайомлюєтесь))

P.S. Рубі мертвуватий, зараз би не починав учити
P.P.S. Погоджуюся, що jQuery на легасі проектах тільки, але будете фронтендером - зіткнетеся, тому його краще знать, але самому в нових проектах не використовувати
P.P.P.S. Мабуть, деякі думки це IMHO)

Подякували: bebyk, 0xDADA11C7, 221VOLT, flatliner4

13

Re: Порадьте стек для JavaScript

harentius,

Дякую!

Щодо Реакту, неодмінно скористаюся вашими порадами і посиланнями.

P.S. Рубі мертвуватий, зараз би не починав учити

От і мені так здалося. До того ж, занадто просто все з рельсою. Трохи розчаровує легкість.

14

Re: Порадьте стек для JavaScript

До того ж, занадто просто все з рельсою. Трохи розчаровує легкість.

Ну... Я б посперечався, це знаєте, як круг знань) Чим більше знаєте, тим більше бачите, що не знаєте)
Хелло ворлди скрізь плюс/мінус прості. А далі...
У рельсах із проблем - розібратися з рубі (ті ж функціональні замашки, хоча спільнота божиться, що це тру ООП мова), робота з базою і їх Active Record...
Доволі погано масштабується... В порівнянні з тою ж нодою чи php/сімфоні

Подякували: bebyk1

15 Востаннє редагувалося bebyk (23.01.2020 21:26:40)

Re: Порадьте стек для JavaScript

harentius написав:

Ну... Я б посперечався, це знаєте, як круг знань) Чим більше знаєте, тим більше бачите, що не знаєте)
Хелло ворлди скрізь плюс/мінус прості.

Я можливо не зовсім коректно висловився, але навіть на початковому рівні відчувається різниця між нодою і рейкою.

Ну й заради справедливості, мене рейка розчарувала саме коли я пішов понад геловорлди. Ґем установив - і всьо чотко працює. А я ж хочу покопатися і зрозуміти, як воно діє.

16

Re: Порадьте стек для JavaScript

А я ж хочу покопатися і зрозуміти, як воно працює.

Колупайти геми - рубі некомпілюємий, тому можете запросто дивитися як все влаштовано)

Ґем установив - і всьо чотко працює.

Ну як вам сказати) Дивлячись який гем) Колись прийшов на проект, де попередня команда таємничим чином зникла)
І там була якась містика із завантаженням файлів на портал.
Вони були використали популярний гем (carrierwave), все  наче зроблено по документації і наче все так, що я б так само робив, технічно нема до чого приколупатися.
Але використання оперативної пам'яті дуже велике. А суть портала в завантаженні великих файлів (на амазон, але то вже деталі).
І от виявилося, що там так все влаштовано, що воно зразу завантажує файл в оперативну пам'ять, без стрімів. При чому проблема була значно глибше, ніж carrierwave, десь в області rack (якщо не помиляюсь, давно було)
Тобто бачите, просто заюзати гем не вийшло, далі були виконані дуже специфічні дії, щоб все це примусити працювати коректно.

До чого я веду) Виберіть технологію, яка вам подобається найбільше. JS стек (який ви наче вибрали) - хороший і перспективний вибір зараз. Заглиблюйтеся в ньому, поступово. Якщо вам здається, що все занадто просто - продовжуйте заглиблюватися) Майже впевнений, що з часом ваша думка зміниться, особливо якщо попадеться задача, яка виходить за межі "хело-ворлда". Просто не відмовляйтеся щось вивчати "бо там все занадто просто")

Криву навчання у більшості відомих мені фреймворків намагаються вдавити спочатку. Доволі грубо. Це для того, щоб більше людей могли почати. Далі крива піднімається.

Подякували: bebyk1

17

Re: Порадьте стек для JavaScript

harentius написав:

А я ж хочу покопатися і зрозуміти, як воно працює.

Колупайти геми - рубі некомпілюємий, тому можете запросто дивитися як все влаштовано)

Ґем установив - і всьо чотко працює.

Ну як вам сказати) Дивлячись який гем) Колись прийшов на проект, де попередня команда таємничим чином зникла)
І там була якась містика із завантаженням файлів на портал.
Вони були використали популярний гем (carrierwave), все  наче зроблено по документації і наче все так, що я б так само робив, технічно нема до чого приколупатися.
Але використання оперативної пам'яті дуже велике. А суть портала в завантаженні великих файлів (на амазон, але то вже деталі).
І от виявилося, що там так все влаштовано, що воно зразу завантажує файл в оперативну пам'ять, без стрімів. При чому проблема була значно глибше, ніж carrierwave, десь в області rack (якщо не помиляюсь, давно було)
Тобто бачите, просто заюзати гем не вийшло, далі були виконані дуже специфічні дії, щоб все це примусити працювати коректно.

До чого я веду) Виберіть технологію, яка вам подобається найбільше. JS стек (який ви наче вибрали) - хороший і перспективний вибір зараз. Заглиблюйтеся в ньому, поступово. Якщо вам здається, що все занадто просто - продовжуйте заглиблюватися) Майже впевнений, що з часом ваша думка зміниться, особливо якщо попадеться задача, яка виходить за межі "хело-ворлда". Просто не відмовляйтеся щось вивчати "бо там все занадто просто")

Криву навчання у більшості відомих мені фреймворків намагаються вдавити спочатку. Доволі грубо. Це для того, щоб більше людей могли почати. Далі крива піднімається.

Дякую, що пояснили.

Якщо не лукавити, то раціоналізувати мій вибір нема сенсу (що я нерозважно тут спробував зробити). Це іраціональний потяг. Інтуїція, якщо бажаєте.

Працюю з JS і поки все подобається.

П.С.

Я не знаю, що ви маєте на увазі під геловорлдом, але я на рейці написав блоґ з реєстрацією і таким іншим.

18

Re: Порадьте стек для JavaScript

маю для вас запитання по js, щоб не розслаблялися
що виведе

{}+[]

і

{}+{}

і

[]+{}

і чому?

(це я просто сам лише нещодавно розібрався, і ставлячи вам такі питання, ще краще то запам'ятаю)

Подякували: harentius, leofun012

19

Re: Порадьте стек для JavaScript

FakiNyan написав:

маю для вас запитання по js, щоб не розслаблялися
що виведе

{}+[]

і

{}+{}

і

[]+{}

і чому?

(це я просто сам лише нещодавно розібрався, і ставлячи вам такі питання, ще краще то запам'ятаю)

Питання як у моїх щоденних змаганнях на SoloLearn.  :D

20

Re: Порадьте стек для JavaScript

FakiNyan, це пов'язано з тим, як js приводить до строки. Операція "+" визначена тільки для строк і чисел.
Далі по правилах приведення)