Как стать автором
Обновить
0
@J0J0read⁠-⁠only

Пользователь

Отправить сообщение

8 учебных проектов

Время на прочтение3 мин
Количество просмотров147K
«Мастер совершает больше ошибок, чем новичок — попыток»

Предлагаем 8 вариантов проектов, которые можно сделать «по фану», дабы получить реальный опыт разработки.

Проект 1. Клон Trello


image


Клон Trello от Indrek Lasn .

Что вы освоите:

  • Организация маршрутов обработки запросов (Routing).
  • Drag and drop.
  • Как создавать новые объекты (доски, списки, карточки).
  • Обработка и проверка входных данных.
  • Со стороны клиента: как использовать локальное хранилище, как сохранять данные в локальном хранилище, как читать данные из локального хранилища.
  • Со стороны сервера: как использовать базы данных, как сохранять данных в базе, как читать данные из базы.

Тут пример репозитория, сделанного на React+Redux.
Читать дальше →
Всего голосов 36: ↑30 и ↓6+24
Комментарии18

Разработка React-приложений с использованием ReasonReact

Время на прочтение9 мин
Количество просмотров18K
Вы применяете React для создания пользовательских интерфейсов? Автор материала, перевод которого мы публикуем, говорит, что он тоже работает с React. Здесь он хочет рассказать о том, почему для написания React-приложений стоит использовать ReasonML.



React — это очень хороший инструмент для разработки интерфейсов. Можно ли сделать его ещё лучше? Для того чтобы улучшить работу с React, сначала надо понять его основные проблемы. В частности, проблему, у истоков которой лежит тот факт, что React — это JavaScript-библиотека.
Читать дальше →
Всего голосов 24: ↑22 и ↓2+20
Комментарии22

JavaScript-only: гомогенная архитектура веб-проектов

Время на прочтение8 мин
Количество просмотров18K
Работа фронтенд-разработчика наполнена задачами по оптимизации кода, переносу готовых фрагментов между версиями проектов и т.п., сложность которых зачастую определяется исторически сложившимся подходом к самой разработке. В своём докладе на конференции HolyJS, которая пройдет 5 июня в Санкт-Петербурге, фронтенд-разработчик Алексей Иванов расскажет, как объем этих проблем можно сократить отказом от привычного подхода, когда приложение состоит из разрозненных частей, в пользу «всё-в-JS». Мы же в преддверии конференции поговорили с Алексеем о том, от каких именно сложностей избавляют предлагаемые им идеи (сами идеи будут подробнее раскрыты в докладе).



— Расскажи вкратце о себе и своей работе.

— Меня зовут Алексей Иванов, я фронтенд-разработчик в компании «Злые марсиане» (Evil Martians). Это распределенная группа разработчиков, помогающая крупным компаниям, вроде eBay или Groupon, а также различным стартапам в короткие сроки и без проблем запускать интернет-проекты с расчётом на быстрый рост.
В Марсианах я сейчас занимаюсь фронтендом сервиса под названием eBay Social для российского офиса eBay. Это классическое приложение на Ruby on Rails с отдельными интерактивными частями, написанными на React.
До Марсиан я делал первую версию SPA-приложения для ridero.ru на Backbone, помогал запускать пару сервисов для Яндекса с использованием bem-tools, а также занимался разработкой других серверных и SPA-приложений разного размера, что позволило мне потрогать кучу разных инструментов и методологий разработки. Мне нравится изучать и сравнивать разные способы организации кода, работы с зависимостями и разрешения конфликтов, используемые в разных методологиях и инструментах.

Откуда вообще появилась идея о каком-то глобальном изменении подхода к разработке?

— Фронтендеры Марсиан работают с двумя основными типами проектов.
Во-первых, мы создаем классические проекты на Ruby on Rails. В таких проектах рендер шаблонов происходит на сервере внутри самих Rails, а сборка CSS и JavaScript живет отдельно в Node.js и Gulp'е или другом сборщике. Мы пользуемся  пре- и постпроцессорами, собираем отдельные файлы в общие бандлы и сжимаем код Clean CSS и UglifyJS, но при этом CSS и JavaScript друг о друге знают очень мало, а про HTML, с которым они работают, вообще ничего не знают.
Читать дальше →
Всего голосов 25: ↑18 и ↓7+11
Комментарии6

Многопользовательский чат на React с бэкендом от Chatix

Время на прочтение17 мин
Количество просмотров11K

Chatix Chatroom


Сейчас я покажу вам как можно сделать чат для команды/пользователей/друзей если у вас нет своего бэкенда или вы не хотите тратить время на его разработку. Мы сделаем простой текстовый чат и на это у нас уйдет около часа.


Написать работающий сетевой чат без бэкенда практически невозможно, он обязательно должен быть в том или ином виде. Мы будем использовать Chatix и его JavaScript SDK. Chatix и SDK будут заниматься хранением сообщений и сетевыми задачами, а мы займемся фронтендом.


Готовый код проекта доступен на GitHub
Demo

Читать дальше →
Всего голосов 23: ↑11 и ↓12-1
Комментарии8

Структурирование React-приложений

Время на прочтение16 мин
Количество просмотров70K
Материал, перевод которого мы сегодня публикуем, раскрывает подходы, применяемые его автором при структурировании React-приложений. В частности, речь здесь пойдёт об используемой структуре папок, об именовании сущностей, о местах, где располагаются файлы тестов, и о других подобных вещах.

Одна из наиболее приятных возможностей React заключается в том, что эта библиотека не принуждает разработчика к строгому соблюдению неких соглашений, касающихся структуры проекта. Многое в этом плане остаётся на усмотрение программиста. Этот подход отличается от того, который, скажем, принят во фреймворках Ember.js или Angular. Они дают разработчикам больше стандартных возможностей. В этих фреймворках предусмотрены и соглашения, касающиеся структуры проектов, и правила именования файлов и компонентов.



Лично мне нравится подход, принятый в React. Дело в том, что я предпочитаю контролировать что-либо сам, не полагаясь на некие «соглашения». Однако много плюсов есть и у того подхода к структурированию проектов, который предлагает тот же Angular. Выбор между свободой и более или менее жёсткими правилами сводится к тому, что именно ближе вам и вашей команде.

За годы работы с React я испробовал множество различных способов структурирования приложений. Некоторые из применённых мной идей оказались более удачными, чем другие. Поэтому здесь я собираюсь рассказать обо всём том, что хорошо показало себя на практике. Я надеюсь, что вы найдёте здесь что-то такое, что пригодится и вам.
Читать дальше →
Всего голосов 30: ↑29 и ↓1+28
Комментарии13

Удвойте скорость написания кода на React с помощью этих простых трюков

Время на прочтение14 мин
Количество просмотров16K

Если вы работаете с React или React Native и чувствуете, что у вас медленная скорость написания кода, вы тратите много времени на поиск ошибок, а не на добавление нового функционала, работаете с большими исходными файлами и вам сложно находить нужные части кода, а также многократно реализуете одну и ту же логику, то эта статья для вас. Вы удвоите скорость написания кода, если отрефакторите код в повторно используемые строительные блоки.

Мы рассмотрим React компонент, который можно хорошо разобрать. И мы будем шаг за шагом реорганизовывать его до хорошего уровня. Вы увидите большое количество идей, которые повысят вашу скорость написания кода.

Читать далее
Всего голосов 17: ↑10 и ↓7+4
Комментарии15

Создание React VR-приложения, работающего в реальном времени

Время на прочтение11 мин
Количество просмотров19K


Библиотека React VR позволяет писать для веба приложения виртуальной реальности с использованием JavaScript и React поверх WebVR API. Эта спецификация поддерживается последними (в некоторых случаях — экспериментальными) версиями браузеров Chrome, Firefox и Edge. И для этого вам не нужны очки VR.


WebVR Experiments — это сайт-витрина, демонстрирующий возможности WebVR. Моё внимание привлёк проект The Musical Forest, созданный замечательным человеком из Google Creative Lab, который использовал A-Frame, веб-фреймворк для WebVR, разработанный командой Mozilla VR.

Всего голосов 34: ↑31 и ↓3+28
Комментарии7

Создаем современное веб приложение. Знакомство с проектом и подготовка к работе. Часть 1

Время на прочтение6 мин
Количество просмотров18K
image
В этой серии статей мы пройдем полный цикл создания клиентской части приложения и напишем небольшую библиотеку компонентов с использованием современного стека технологий.
Читать дальше →
Всего голосов 22: ↑18 и ↓4+14
Комментарии16

Свое мобильное приложение: от идеи до разработки, продвижения и развития

Время на прочтение20 мин
Количество просмотров28K

В этой статье я объединил все свои знания и опыт, охватил все этапы разработки мобильных приложений. В статье не будет кода, она будет полезной не только для Android, iOS и Flutter-разработчиков, но также тем, у кого нет опыта в программировании.

Я пройдусь по основным этапам разработки мобильного приложения:

Проработка идеи
Проектирование UX/UI
Разработка
Аналитика
Продвижение
Дальнейшее развитие приложения

Расскажу о том, как создать свое приложение, которое будет интересно не только вам.

Читать далее
Всего голосов 11: ↑8 и ↓3+6
Комментарии10

Откуда брать идеи для пет-проектов

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров14K

Очень часто при создании пет проекта для обучения я сталкивался с проблемой идеи. Откуда их брать? Постарался собрать весь пак, откуда можно брать идеи для реализации пет проектов. А также где можно проверить свои навыки, самостоятельно изучая новые инструменты и фреймворки.

Читать далее
Всего голосов 7: ↑3 и ↓4+4
Комментарии19

Учебный курс по React, часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Время на прочтение14 мин
Количество просмотров190K
Представляем вашему вниманию первые 5 занятий учебного курса по React для начинающих. Оригинал курса на английском, состоящий из 48 уроков, опубликован на платформе Scrimba.com. Возможности этой платформы позволяют, слушая ведущего, иногда ставить воспроизведение на паузу и самостоятельно, в том же окне, в котором ведётся демонстрация, экспериментировать с кодом. Курс показался нам интересным, мы решили перевести его на русский и преобразовать в формат традиционных публикаций.



Полагаем, этот курс будет полезен всем, кто, что называется, «не умеет в React», но хочет научиться. В то же время, на то, чтобы превратить этот курс в обычные публикации, нужны немалые силы и время, поэтому мы, прежде чем принимать окончательное решение о запуске этого проекта, предлагаем всем желающим оценить курс и поучаствовать в опросе о целесообразности его перевода.
Читать дальше →
Всего голосов 28: ↑26 и ↓2+24
Комментарии60

Продуктовый подход к pet-проекту или как я разработал музыкальное веб-приложение

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров11K

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

Читать далее
Всего голосов 37: ↑35 и ↓2+35
Комментарии31

Как я придумал 20 проектов и собрал портфолио

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров33K

Привет, Хабр! Сегодня расскажу, как сделал несколько десятков пет-проектов, научился работать с другими программистами, решать конфликты на GitHub и даже попробовал себя в роли тимлида. 

Меня зовут Абузар Мамедов, я студент курса «Фронтенд-разработчик» в Яндекс Практикуме, а этими проектами я занимался во время учёбы. Текст может быть полезен новичкам, которые хотят больше практиковаться и найти идеи для собственных проектов. 

В статье я подробнее расскажу о трёх проектах: генератор резюме с динамическим заполнением и SPA-приложение интернет-магазина и ещё одно приложение на React для поиска GIF. Чтобы понять, что можно улучшить, наставник курса Алексей Гмитрон оценил их качество и поделился мыслями.

Читать далее
Всего голосов 13: ↑6 и ↓7+1
Комментарии6

Trunk Based Development — кто такой и зачем нужен

Время на прочтение5 мин
Количество просмотров49K

Привет! Меня зовут Павел Лакосников, я тимлид команды бэкенд-инженеров в Авито. Сегодня расскажу про свой любимый подход к разработке Trunk Base Development, сравню его с другими моделями ветвления и подсвечу его достоинства и нюансы.

Краткий обзор трёх моделей ветвления: Central Workflow, Git Flow, Trunk Based Flow, с акцентом на моего фаворита — Trunk Based Flow.

Читать далее
Всего голосов 27: ↑22 и ↓5+21
Комментарии44

Фича-тогглы: инструкция по применению

Время на прочтение6 мин
Количество просмотров8.3K

Всем привет! Я Павел, тимлид команды SLA, и занимаюсь оценкой надёжности Авито. В своей прошлой статье я рассказал про стратегии ветвления и Trunk Based Development. Если не читали, переходите по ссылке. А сейчас я хочу рассказать про фича-флаги, которые появляются именно в контексте TBD.

Читать далее
Всего голосов 12: ↑10 и ↓2+10
Комментарии4

Маршрутизация в большом приложении на React

Время на прочтение7 мин
Количество просмотров41K


Привет, меня зовут Борис Шабанов, я — руководитель Frontend-разработки в департаменте разработки рекламных технологий Rambler Group. Сегодня я расскажу вам о том, как на нашем приложении возникли проблемы маршрутизации, и про то, как мы их решали.

Всего голосов 13: ↑13 и ↓0+13
Комментарии16

Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее

Время на прочтение8 мин
Количество просмотров44K

Меня зовут Назим Гафаров, я разработчик интерфейсов в Mail.ru Cloud Solutions. На дворе 2020 год, а мы продолжаем обсуждать «нововведения» ES6-синтаксиса и преимущества MobX над Redux. Существует много причин использовать Redux в своем проекте, но так как я не знаю ни одной, расскажу о том, почему мы выбрали MobX.

Почему?
Всего голосов 55: ↑51 и ↓4+71
Комментарии242

Настройка webpack 5 [bonus] React Hot Reloading

Время на прочтение8 мин
Количество просмотров39K

Базовая настройка webpack 5 + настройка для разработки на React (вкл. React Hot Reloading).

Что, зачем и почему?

Что? Webpack - сборщик модулей для JavaScript. Является одним из мощнейших инструментов современной веб-разработки.

Зачем? Webpack позволяет комфортно создавать приложения по модульной структуре, он собирает все модули в один бандл и минифицирует его. Но это лишь поверхностное описание возможностей этого инструмента, на деле вебпак имеет значительно больше возможностей.

Почему? Вам теперь больше нет необходимости беспокоится о сборке проекта, один раз настроил webpack и он все будет делать за вас!
P.S. Ну, или не один раз.
P.S.S. Ладно, точно не один раз.

Читать далее
Всего голосов 4: ↑3 и ↓1+3
Комментарии7

Архитектурный паттерн Dependency Injection в React-приложении

Время на прочтение15 мин
Количество просмотров40K

Расшифровка доклада Сергея Нестерова с конференции FrontendLive 2020.

Привет! Меня зовут Сергей, уже больше двух лет я работаю в группе компаний Тинькофф. Моя команда занимается разработкой системы для анализа качества обслуживания клиентов в Тинькофф, и, как вы, наверное, догадались, мы используем React в своем приложении. Не так давно мы внедрили в свой проект архитектурный паттерн Dependency Injection совместно с IoC-контейнерами. Сделали мы это не просто так: это позволило нам решить ряд проблем, которые тормозили разработку нового функционала.

Читать далее
Всего голосов 29: ↑28 и ↓1+32
Комментарии48

Инверсии зависимостей управления впрыском

Время на прочтение6 мин
Количество просмотров125K
image

Вступление


Наверняка первый вопрос, который возник у вас при взгляде на заголовок, был "Шта?". На самом деле я просто перевел фразу "Инверсия управления, внедрение зависимости" в Google Translate на китайский, а затем обратно. Зачем? Затем, что на мой взгляд, это хорошая иллюстрация того, что происходит на самом деле. Люди вокруг путают, коверкают и извращают эти понятия. По долгу службы я провожу много интервью, и 90% того, что я слышу, когда задаю вопрос про DI — честно говоря, откровенный бред. Я сделал поиск по Хабру и нашел несколько статей, которые пытаются раскрыть эту тему, но не могу сказать, что они мне сильно понравились (ладно, ладно, я проглядел только три первых страницы, каюсь). Здесь же на Хабре я встречал в комментариях такую расшифровку IoC, как Injection of Container. Кто-то всерьез предполагает, что есть некий механизм инъекции контейнеров, который сосуществует где-то рядом с DI, и, видимо, даже делает нечто похожее. Только с контейнерами. Мда. На самом деле понять внедрение зависимости очень просто, надо всего лишь…
Читать дальше →
Всего голосов 48: ↑41 и ↓7+34
Комментарии51

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность