Как научить первокурсника в веб?
Публичный пост
26 ноября 2021
897
Всем привет, нужен совет опытного фротендера или даже фулстека.
Представьте, что вам дали трех студентов-первокурсников. Хочется дать им некоторый проект, но чтобы он был в вебе. И чтобы они его потом могли показать кому угодно.
Для конкретики и уровня сложности, пусть это будут шашки по сети, с чатиком, и комнатой для выбора с кем играть (со случайным посетителем или другом).
Студенты умные, умеют в C++, но не умеют в веб (ts/js/css). Я бы ожидал что у студентов есть семестр, в семестре есть 5-10 часов в неделю на проект. Сюда входит и прочтение мануалов, и программирование.
Тут есть серия вопросов.
- Какой стек выбрать, чтобы студенты могли максимально быстро его освоить и что-то на нем накатать?
- По выбранному стеку. Какие бы курсы, материалы (желательно на русском) вы бы посоветовали?
- Есть ли у вас идеи по общему направлению, как от пустого репозитория дойти работающей игры в шашки, не закапываясь в мануалах? Отправили бы студентов учить джангу с фласком, или лучше Parse/Firebase?
- Какие ваши самые любимые, короткие посты, которые бы проясняли что-нибудь по фронтенду? Мой пример: гайд по флексбоксу.
Я такой первокурсник, которого натаскивают аж два человека по отдельности :D
Что давали мне:
№1 Next.js
№2 CSS/Html
Первые свои попытки в веб я сделала благодаря яндекс-практикуму с бесплатной вводной частью: https://practicum.yandex.ru/profile/web/
Один мой Наставник учил меня именно фронтенду - с его помощью освоила react + next.js, они довольно приятные. CSS я осваивала с помощью канала "Фрилансер по жизни" и курса codecademy: https://www.codecademy.com/learn/learn-css. Через две недели сделала свою первую адаптивно-отзывчивую верстку, а еще через месяц написала первый лендинг с админкой.
Из других проб:
Я хотела сделать программу для стартапчика, в котором работаю, где человек просто вставляет текст, а они автоматически преобразуются в слайды (текст и слайды стандартизированы). Юзали с Наставником Stencil, потом перешли на lit-element: https://lit-element.polymer-project.org. Бросила в итоге этот проект, потому что слишком сложно)
Мой вывод: бесполезно давать мини-проектики в самом начале. Нужно просто для начала выучить синтаксис на легких задачах (особенно хорошо, если они уже умеют их решать), даже если это Fizz buzz.
Сделайте им проверочную перед стартом: попросите у них задачи, которые они делали на c++, возьмите похожие и пусть они их прорешают. Как говорил dr.House: "Все врут". Если справятся, пусть их же перепишут на javascript, а потом на typescript.
Дайте им задачки из exercism-а или заставьте пройти курсик по js от codecademy. Я просто набивала руку на них, просто чтобы выучить синтаксис.
Важно:
№1 Пишите с ними псевдокод!
Я хоть и соображаю, читаю и пытаюсь, но в итоге, почему-то, не могу написать ни строчки кода, пока мне не покажут, как это делается.
На мой взгляд, это даже важнее изучения стека технологий. Если бы они могли кодить сами, то перейти на js им не составило бы труда.
№2 Глазки умненькие, но сказать ничего не могу.
Чаще всего проблема моих наставников была в том, что они не понимали, почему я не могу справиться с той или иной задачей. А моя проблема была в том, что они пропускают очевидные для них действия и умозаключения в цепочке рассуждений, я что-то упускаю и всё, сигнал потерян.
Не расчитывайте, что у них есть какие-то представления об информатике. Они действительно могут быть, но ребята стопроц слегка лукавят о своих способностях. Поэтому считайте, что у них в голове нет ничего.
Т.к. я знаю очень мало, я не могла сформулировать, что мне непонятно. Я не могла даже составить поисковый запрос, потому что не знаю термины, по которым найду ответ. Помогайте им искать информацию - у программистов действительно есть свой язык, и его нужно просто учить. +Не всем очевидно, что искать нужно на английском :)
№3 Памятки и совместное выполнение каждого действия:
С меня снимали все проблемы по поводу настройки окружения по первости, это помогло сразу приступить к задаче. Но когда мне пришлось сделать это самой - я сдулась. Пишите для них памятки, проходите вместе с ними каждое действие по ней, только тогда они будут уметь делать это сами.
№4 Чтение документации
Не верьте в способность первокурсника самостоятельно читать и разбираться в документации) Начинающий не в состоянии получить абстрактную задачу-проект, начать его делать и типа он обратится к вам за помощью, если застрянет. Не, это так не работаеет
Да, документация на английском лучше, чем на русской, но помните, что они учились в школе, в котором их натаскивали на егэ или чтение текстов про хобби. Пусть читают с переводом и сравнивают. Английский более абстрактный язык, поэтому он ближе к программированию, чем русский. Но без русского не понять, что там написано вообще.
№5 У них нет 5-10 часов в неделю на проект
Они скорее всего будут всё делать в последний момент, уделять максимум 2-3 часа в неделю на это. Онлайн помогает создать ежедневный контроль. Если вы правда хотите им помочь, можно сделать так, чтобы они отчитывались по задачам ежедневно, даже если они работали 15 минут.
Что будет, если делать не ежедневно, надеясь на сознательность ребят? Будем считать, что вы забились встречаться вживую или созваниваться раз в неделю, чтобы посмотреть, у кого что получилось. Тогда ребята к этой дате будут готовиться, а всю остальную неделю делать свою рутину. За неделю они забудут, что было в прошлый раз, начнут вспоминать (а это потери времени), то, что поняли в прошлый раз, уже снова не понимают. На встрече вы будете снова объяснять им почти то же самое и еще чуть-чуть новой инфы. Они скажут: "Спасибо! Мы всё поняли!", а за неделю уже снова всё забудут.
Мой Наставник исследует задачу - "диагностика компетенций it-специалиста", поэтому он со мной возится. Я думаю, что если вы спросите у него, что-как, а потом тоже поделитесь своим опытом, когда занятия в вашей группе начнутся, то это будет полезно всем. Вот его телеграм @sairus7, покажите этот пост и он поймет, почему вы ему написали.
Плюсую про "начинай с конца", по мне так это очень универсальное сейчас правило если хочется выкатиться в айтишечку. Самые самые азы и сразу фреимворки, потому что самому эволюционно учить и проходить всю ту историю развития которую прошли программисты до тебя - очень долго, сложно, и мало прикладного толку.
Это как с теоремами из вышмата - если ты собрался работать и применять их то лучше их в справочнике иметь просто а не по очереди самому придумывать как их доказать и допирать.
Если бы я был первокурсником, я бы хотел понимать для чего нужны все эти бутстрапы, вебпаки, vue, npm, less, sass и куча всяких приблуд. Потыкать JS и конкретный фреймворк не проблема, но вот разбораться во всем этом зоопарке сложновато.
Вот здесь мне неплохо разжевали - https://vas3k.club/question/9443/#comment-172d2cb1-7539-404c-ac14-b184379b3a43
Маловато
Ну а сами студенты-первокурсники на что мотивированы?
Parcel поддерживает React и Vue, а также TypeScript. Будет возможность пощупать все самое актуальное без сложного сетапа
Раз вам нужен реалтайм, то тут нода — хороший выбор. Она без танцев поддерживает вебсокеты и для нее есть шикарный socket.io
Если хочется TypeScript на беке, то есть ts-node и ts-node-dev
Если мы считаем, что приложение все-таки клиент-серверное, то хорошим выбором серверного фреймворка станут fastify,
hapiиrestifyБаза данных вообще не принципиальна, но думаю что бессхемные решения не потребуют изучения еще и SQL. Хотя, с хорошим ORM SQL тоже не потребуется. Для SQL баз данных актуальные ORM TypeORM для тайпскрипта, и sequelize для жиэса. С монгой можно нормально работать как через нативный драйвер, так и через mongoose
Деплой
У меня хороший опыт с heroku. Быстро настраивается, хорошо работает, ноду поддерживает, вебсокеты крутятся
С первого дня необходимо позаботиться о CORS и HTTPS
Тут затрудняюсь. Я учился давно и как бог на душу положит и актуальных курсов не знаю. Если мы говорим про «программу-минимум», то это точно learn.javascript.ru, справка по DOM API — MDN.
Вам нужно заранее максимально все продумать и подстелить соломки. Найти материалы, определиться с алгоритмами, разработать протоколы и структуры данных. Студенты должны делать только непосредственно работу по реализации
Проще говоря, вам нужно составить методичку, а студенты будут по ней работать
Я бы дал следующее:
vuejs или svelte, но второй пока еще сыроват, но потенциально интересен. Первый я считаю текущей дельфи от мира js.
По vuejs официальный мануал. Берите сразу версию 3
Единственное, но почитайте материалы архитектуре elm и redux отдельно, так-как vuex плоховато описаны общие принципы
В качестве css для рисования интерфейса или bootstrap или buefy
Если умеют в C++ я бы предложил backend часть написать на golang
Самое очевидное на мой взгляд и бэк и фронт написать на одном языке, чтоб не пялиться в что-то еще. JS/TS тот же допустим. Особенно после C++ им будет весело со скриптовым языком. А насчет какого-то стека - зависит от того чему хочешь научить, потому что на чистом надо тоже уметь писать и это прикольная база в которую уже можно всё добавлять