Как научить первокурсника в веб?

 Публичный пост

Всем привет, нужен совет опытного фротендера или даже фулстека.

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

Для конкретики и уровня сложности, пусть это будут шашки по сети, с чатиком, и комнатой для выбора с кем играть (со случайным посетителем или другом).

Студенты умные, умеют в C++, но не умеют в веб (ts/js/css). Я бы ожидал что у студентов есть семестр, в семестре есть 5-10 часов в неделю на проект. Сюда входит и прочтение мануалов, и программирование.

Тут есть серия вопросов.

  1. Какой стек выбрать, чтобы студенты могли максимально быстро его освоить и что-то на нем накатать?
  2. По выбранному стеку. Какие бы курсы, материалы (желательно на русском) вы бы посоветовали?
  3. Есть ли у вас идеи по общему направлению, как от пустого репозитория дойти работающей игры в шашки, не закапываясь в мануалах? Отправили бы студентов учить джангу с фласком, или лучше Parse/Firebase?
  4. Какие ваши самые любимые, короткие посты, которые бы проясняли что-нибудь по фронтенду? Мой пример: гайд по флексбоксу.
44 комментария 👇
Кристина Крицкая , Ассистент Вастрика Команда Клуба 26 ноября 2021

Я такой первокурсник, которого натаскивают аж два человека по отдельности :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, покажите этот пост и он поймет, почему вы ему написали.

  Развернуть 1 комментарий

Для шашек можно тогда заюзать Phaser.js - это фреймворк для gamedev в вебе. Мне было весело там копаться, я сделала 6-7 игр. Готова была по 16 часов их пилить. Советую вот этот курс: https://www.codecademy.com/learn/learn-phaser

  Развернуть 1 комментарий

@kriss2003, круто, спасибо!

  Развернуть 1 комментарий

@kriss2003, Кристина, спасибо за советы!

  Развернуть 1 комментарий

@kriss2003, интересные моменты. Хотя там ребята уровня ВКОШП/ЛКШ. Т.е. я им рисовал диаграммки, как тут, а они уже это дело переводили в код. Не без затыков, но больше на уровне библиотек и системного понимания.

С практикумом интересно. Стоит о нем помнить.

А вот если по курсам в часах. Много времени они заняли у вас?

  Развернуть 1 комментарий

@smileijp, я их фигачила параллельно с учебой в 11 классе и подготовкой к экзаменам. Яндекс.Практикум я съела очень быстро, codecademy больше времени занял. Они пишут, сколько времени займет курс, если выполнять всё, то в принципе столько и займет. Я выполняла не всё.

Повезло им с базой, эх) У меня такой подготовки не было, единственное, это любовь к логике, абстракциям и созданию систем. Завидую тем, кто вовремя попал в хорошую школу. Удачи вам и ребятам, надеюсь, всё получится!

  Развернуть 1 комментарий

@kriss2003, понятно, спасибо) Будет на основе чего выстраивать план следующего проекта.

Вам тоже удачи!

  Развернуть 1 комментарий
Simon Chechin , Full Stack developer & "tech lead" 26 ноября 2021

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

Это как с теоремами из вышмата - если ты собрался работать и применять их то лучше их в справочнике иметь просто а не по очереди самому придумывать как их доказать и допирать.

  Развернуть 1 комментарий
Павел Михаловский , Инженер-программист 26 ноября 2021

Если бы я был первокурсником, я бы хотел понимать для чего нужны все эти бутстрапы, вебпаки, vue, npm, less, sass и куча всяких приблуд. Потыкать JS и конкретный фреймворк не проблема, но вот разбораться во всем этом зоопарке сложновато.
Вот здесь мне неплохо разжевали - https://vas3k.club/question/9443/#comment-172d2cb1-7539-404c-ac14-b184379b3a43

  Развернуть 1 комментарий

@Pavel9609, хороший поинт.

  Развернуть 1 комментарий
Юра Чеботаев , Фронтенд разработчик 26 ноября 2021

в семестре есть 5-10 часов в неделю на проект. Сюда входит и прочтение мануалов, и программирование.

Маловато

вам дали трех студентов-первокурсников

Ну а сами студенты-первокурсники на что мотивированы?

Какой стек выбрать, чтобы студенты могли максимально быстро его освоить и что-то на нем накатать?

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.

Есть ли у вас идеи по общему направлению, как от пустого репозитория дойти работающей игры в шашки, не закапываясь в мануалах? Отправили бы студентов учить джангу с фласком, или лучше Parse/Firebase?

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

Проще говоря, вам нужно составить методичку, а студенты будут по ней работать

  Развернуть 1 комментарий

@ychebotaev, студенты, высунув языки, куда-то идут. По первому ощущению: "Мы пришли учиться, так что на сколько сил хватит, будем пилить." Если объяснять, почему то, что они делают сегодня, пригодится им завтра, вполне себе мотивированы. По модулю своих сил.

Так, да, интересно было бы все это красиво упаковать в небольшой курс. Чтобы студент прослушал, а потом пошел колотить скворешники налево и направо)

За подборку стека - спасибо!

  Развернуть 1 комментарий

@smileijp, А почему так мало времени выделяется? По-идее в универе времени — вагон

  Развернуть 1 комментарий

@ychebotaev, это Питерская Вышка (бывший СПбАУ). Там нет такого понятия, как свободное время. Как минимум первые два года.

  Развернуть 1 комментарий

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

Ну и сейчас нагрузки скорее всего считаются под бывших олимпиадников.

  Развернуть 1 комментарий

@smileijp, Может целесообразнее повременить с проектом до старших курсов? Пять часов в неделю слишком мало чтобы освоить что-то на достойном уровне, и лучше потратить это время на отдых, который необходим для усвоения знаний. Если ребята будут напряженно учиться по своим предметам, а потом напряженно фронтендить, то в итоге знания не усвоятся ни по тому ни по другому

Я начал изучать верстку еще в школе и объем материала занимал все мое свободное время, и это при том, что самоучитель, по которому я занимался назывался что-то типа «ваша первая домашняя страница»

  Развернуть 1 комментарий

@ychebotaev, курсовые никто не отменял. Вопрос, чтобы проект был посильным.

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

  Развернуть 1 комментарий
Pavel Ditenbir , Разработка и консалтинг в области видео, стриминге, кодеках и OTT 26 ноября 2021

Я бы дал следующее:

  • Django: все работает из коробки; через 5 минут у тебя работающее веб-приложение; питон очень прост и много где используется - студентам может сильно пригодиться в будущем; база также будет сделана сразу же за тебя; короче - очень легко вкатываться; есть официальный туториил https://www.djangoproject.com/start/, возможно даже на русском
  • bootstrap + vanilla JS: за 4 месяца изучить и совеременный фронт, и бэк для среднего первокурсника - нереально; такое сочетание будет достаточно простым; при этом, студенты поймут, как оно работает изнутри, что поможет понять логику популярных мейнстримовых фреймворков; плюс ко всему, не будет путаницы в головах, где средства фреймворка, а где сам JavaScript, тк все будет на голом JS
  • дал бы какое-то более простое, но применимое практически, приложение, типа расписание занятий для их группы, простая проджект-менеджмент система для учета лабораторных/курсовых и тп: это проще, чем писать игру с кастомным дизайном и игровыми механиками; это будет решать конкретные задачи студентов, отсюда больше мотивации; это ближе к усредненным задачам реального мира.
  Развернуть 1 комментарий

@DiPaolo,

  • Именно джанго, не фласк?
  • Да, про vanilla JS аргумент хороший. Разве что, jquery бы добавил.
  • Если что, студентов трое. Так что треки получения компетенций можно распараллелить.
  • Нет жесткой привязки к шашкам. Я скорее про уровень проекта, что это не просто запрограммируйте автомат Кнута-Мориса-Пратта. Просто, что небольшой проект, который не стыдно было бы выставить на всеобщее обозрение, ну и прогать было бы интересно.
  Развернуть 1 комментарий

@smileijp,
- именно Джанго, тк для новичков реально проще. Фласк очень крутой, но это не для вкатывания. Чем хорошо Джанго для новичка - у тебя сразу готовое и настроенное веб приложение с фронтом и БД. Причем, от тебя требуется лишь несколько команд в терминале :) ни строчки кода не надо писать. И ты уже можешь изучать, как "этот ваш веб" работает на УЖЕ работающем приложении.
- jQuery - да, забыл про него. Хороший вариант

  Развернуть 1 комментарий

@smileijp, Поддерживаю @DiPaolo в той части, где он предлагает сделать систему управления чем угодно. Реальная работа именно такая.

А вот jQuery лучше не брать, она морально устарела и прививает плохой вкус. Нативное DOM API изучать полезно для общего развития.

  Развернуть 1 комментарий

@DiPaolo, джанго очень тяжелый и в текущий момент просто не нужен. Времена mvc прошли. Лучше уж на flask

  Развернуть 1 комментарий

@norguhtar, согласен. Но для студентов, лично мое мнение, именно с Джанги лучше начать.

У меня был опыт, когда я человеку, который хотел вкатиться, дал сразу Фласк, потому что он крутой и легковесный... Человек тупо не потянул, некоторые концепции были сложны для понимания. Для человека с N годами опыта фласк ок, но для новичка - тяжко будет сразу с фласка начинать. Опять же, никого не уговариваю, это мое мнение.

  Развернуть 1 комментарий

@norguhtar, я с тобой очень сильно не согласен, но начинать холивар не буду

  Развернуть 1 комментарий
  1. какой-нибудь современный стек (реакт или же ангуляр/вью), потому что они очень отличаются от того, как веб пишут в традиционных не спа сайтах, и под них надо отдельно мозг настроить. плюс это еще и востребованно на рынке
  2. по курсам мне ппц как заходит этот немец, он есть и на отдельном academind и на всеобщем udemy. Он все ведет на английском, но на таком уровне дикции, что я на скорости 1.75 его прекрасно понимаю. Курсы у него есть про все в вебе от фронта до бека и даже немного по мобильной разработке
  3. я бы сформулировал общий принцип как "начинай с конца". у меня есть несколько знакомых, которые хотели войти в веб и начинали все как по книжечке: сначала хтмл, потом цсс, потом джс и только потом фреймворки. прикол в том, что хтмл и цсс заходят легко, но как начинается джс, где все программирование заканчивается на обработке кликов и выкверивании хтмл элементов, то это вводит в ступор и народ буксует. я вспомнил, как я в веб вкатился: у меня была какая-то общая база по программированию (как у упомянутых студентов с плюсами) и ооочень поверхностное понимание веба, а потом я сразу с места в карьер нырнул в ангуляр, что позволило наглядно видеть результаты работы и уже парралельно углубляться в тонкости тех или иных аспектов и историю развития веба в целом
  Развернуть 1 комментарий

@vorant94, главный риск фреймворков, что в них вкатываться займет весь семестр. Собственно, часть вопроса, это если есть любимый фрейворк, может есть и какой материал, чтобы почитал/посмотрел часов за 5-10 и вперед с песней. Вот кажется, что на Реакт уйдет куда больше. А если еще и Redux/RsJs добавить, то можно еще смело месяц сверху накидывать (20 часов на человека).

У меня пока вариант только делать проект так, чтобы тяжелую артилерию не тащить, но чтобы еще было интересно.

  Развернуть 1 комментарий

@smileijp, ну, у меня опыт только с ангуляром, а там по отзывам в сети порог вхождения повыше реакта. но должен признаться, что лучшей документации, чем у ангуляра, я еще не встречал от слова совсем… вкатывался я на фулл-тайм стажировке в это все дело, поэтому тайминги с описанными в посте рамками сравнивать сложно

  Развернуть 1 комментарий

@vorant94, я только в реакт умею. К документации претензий нет. Но вот только быстро ее не прочитаешь.

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

На студента, если сможет выделить 30 часов в месяц, получим 120 часов на семестр. 360 на троих, но это еще надо запараллелить адекватно.

Теперь оценку бекендера умножаем на 2 за переключение контекста у студентов, и еще может на полтора за затупы, но под взором ментора. И еще на оптимистичные полтора, за плохую параллельность. Т.е. 1280 часов.

Пока получается, что если с нуля во фронтенд, то студенты эпично заваливают защиту. И за лето допиливают проект :D

  Развернуть 1 комментарий

@smileijp, бэкендеру с нуля на шашки в вебе надо 2 месяца? имхо очень пессимистические прогнозы… я какой-нибудь простой сервак для соцсетки, будучи фронтом с нулевым знанием бека, подниму за месяц… без редиса, кафки и прочих умных слов, но тем не менее

  Развернуть 1 комментарий

@vorant94, это же перпендикулярное утверждение :) Надо брать знакомого Васю-бекендера и говорить, сколько у него ушло на вкатываение.

Стоит, конечно, учесть, будет ли ботать redux/rsjs. Если без них, побыстрее будет. Наверное, с шашками можно обойтись.

  Развернуть 1 комментарий

@smileijp, ну, с этим тоже не проблема)

@Arlas, сколько у тебя ушло на вкатиться в проект, когда тебя на фронт у нас пересадили, не помнишь?

  Развернуть 1 комментарий
Anatoly Shipitsin , Специалист по НЕХ 26 ноября 2021

vuejs или svelte, но второй пока еще сыроват, но потенциально интересен. Первый я считаю текущей дельфи от мира js.

По vuejs официальный мануал. Берите сразу версию 3

Единственное, но почитайте материалы архитектуре elm и redux отдельно, так-как vuex плоховато описаны общие принципы

В качестве css для рисования интерфейса или bootstrap или buefy

Если умеют в C++ я бы предложил backend часть написать на golang

  Развернуть 1 комментарий

@norguhtar, спасибо, про beufy еще не слышал. А вот так, на вскидку, сколько времени должно уйти на изучение golang под бекенд и сколько на vuejs?

  Развернуть 1 комментарий

@smileijp, beufy это bulma для vue

Ну вот golang я думаю они быстро вкатятся, я начал что-то внятное писать в первую же неделю. И для них после С++ будет почти тоже самое но проще.
С vuejs сложнее я бы оценивал 1-3 месяца. Просто современный веб имеет своебразную все же модель того как все в нем работает.

  Развернуть 1 комментарий

@norguhtar,

С vuejs сложнее я бы оценивал 1-3 месяца. Просто современный веб имеет своебразную все же модель того как все в нем работает.

Вот это самое противное. На весь проект есть 4 месяца от силы, минус завалы и затупы, минус сессии. В прошлый раз я подумал и решил не рисковать. Отправил пилить проект на Qt и C++.

Но было ощущение, что это немного мимо реалий мира.

  Развернуть 1 комментарий

@norguhtar, я бы еще порекомендовал ElementPlus, очень понравилась.

  Развернуть 1 комментарий

@Ray, Кстати весьма недурно.

  Развернуть 1 комментарий

Самое очевидное на мой взгляд и бэк и фронт написать на одном языке, чтоб не пялиться в что-то еще. JS/TS тот же допустим. Особенно после C++ им будет весело со скриптовым языком. А насчет какого-то стека - зависит от того чему хочешь научить, потому что на чистом надо тоже уметь писать и это прикольная база в которую уже можно всё добавлять

  Развернуть 1 комментарий

@Rustho, вот мне как раз BaaS-ы в этом плане кажутся интересными. Parse вроде совсем простенький. В FireBase пока нет времени ткнуться, но хочу.

Сам я в реакт немного умею (+redux/rsjs). Но обычно идея в том, чтобы дать студентам потрогать командную разработку и выполнить какой-то проект. Им все равно еще год-другой будут давать основы, от дискретки до компиляторов.

  Развернуть 1 комментарий

@smileijp, Командная разработка - это хорошо, поделиться на роли - фронтенд, бэкенд, разный функционал? Я просто не понимаю смысл давать пекусам что-то вроде фреймворков. Типо ребята вот смотрите мы будем писать не просто на html+css+js, а будем писать на метаязыке что зовется jsx, вот смотрите это темплейты - не спрашивайте зачем, ведь вы не знаете что на фронте самая затратная задача это перерендер документа

  Развернуть 1 комментарий

@Rustho, на прошлом проекте примерно так и было. Дело не в том, что я хочу научить во фреймворк. Я хочу, чтобы проект был сделан. Если его быстрее, проще и эффективнее сделать без условного реакта/вуе, то я их смело выкину. Только по ощущениям, быстрее будет сделать именно со фреймворками.

Собственно, я и пингую на тему, где кривая обучения пониже, и можно что-то быстро запилить.

  Развернуть 1 комментарий

@Rustho, про голанг, кстати, мне нравится идея. Хоть я и не знаю сам язык или экосистему рядом. Просто разделить код будет удобнее. Контр-аргументр к баасам.

  Развернуть 1 комментарий

@smileijp, Ну судя по твоим словам, главное, что тебе нужно сделать - это определиться что ты хочешь именно сделать - научить то как делается сейчас веб? показать что веб это херня собачая и за 20 минут готовый сайт? Научить как можно большему количеству технологий?

  Развернуть 1 комментарий

@Rustho, хочу масштабируемый "скворешник" :D

Т.е. если студенты, в реальности, могут за неделю выполнить проект уровня шашки, пусть с самым отвратительным кодом, но чтобы работал, это было бы бесконечно круто. Я тогда найду что туда напихать, чтобы и код улучшить, и какие-то дополнительные инструменты потрогать.

Пока я не очень понимаю, могут ли три первокура за 10 часов в неделю на семестр без начальных знаний веба, сделать шашки в вебе. А если могут, как бы выглядел их стек и таймлайн обучения/реализации проекта.

  Развернуть 1 комментарий

😎

Автор поста открыл его для большого интернета, но комментирование и движухи доступны только участникам Клуба

Что вообще здесь происходит?


Войти  или  Вступить в Клуб