Битва студента CS с новыми парадигмами

Еще из серии

Введение и учебник на ближайшие недели

В рамках своей дипломной работы на степень бакалавра я изучаю React Native для компании-разработчика программного обеспечения и оцениваю его преимущества как расширение Objective-C и Java для создания компонентов пользовательского интерфейса в собственных приложениях.

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

Я не буду вдаваться в основы того, почему React крутой. Об этом вы можете прочитать в документации. Вместо этого я попытаюсь объяснить, основываясь на том, что я узнал на этой неделе, почему я считаю, что именно вью-библиотеку нужно изучать прямо сейчас.

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

Итак, приступим.

Первые шаги

Я почти закончил работу над курсом Уэса Боса React For Beginners. Он действительно талантливый программист и отличный учитель! Поскольку название для некоторых сбивает с толку, я проясню его, сказав, что для курса определенно требуется предварительное знание JavaScript. Так что если вы переходите с JQuery или Angular, вы будете чувствовать себя как дома.

Декларативное программирование учит думать

В универе я жил в императивном мире Java, состоящем из шаблонов ООП и MVC. Единственным исключением был курс на Erlang, который научил меня декларативной парадигме.

Я пытаюсь представить императивное программирование как запуск коробки передач на нашем компиляторе. Ваш код говорит, что вы хотите, чтобы произошло на каждом этапе пути. Декларативное программирование фокусируется на результате, а не на процессе, необходимом для его достижения. В uni почти все решалось с помощью цикла for. Настолько, что я даже задумался, почему существуют другие петли. Попасть в эту ловушку - простой способ остаться в рамках императивного программирования.

Если это объяснение не оправдывает вас, Тайлер Макгиннис очень красноречиво его выражает:

«Я принадлежу Wal-Mart. Как мне отсюда добраться до твоего дома? »

Обязательный ответ: выйдите из северного съезда со стоянки и поверните налево. Двигайтесь по автомагистрали I-15 на юг, пока не дойдете до съезда с шоссе Bangerter. Сверните направо с выезда, как будто собираетесь в Ikea. Идите прямо и на первом светофоре поверните направо. Продолжайте движение на следующий светофор, затем поверните налево. Мой дом № 298.

Заявительный ответ: Мой адрес: 298 West Immutable Alley, Draper Utah 84020.

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

Модульные компоненты поверх MVC в любой день недели

Компоненты - это самые маленькие формы строительных блоков в React. У них есть собственное состояние, вход и выход. Таким образом, вы не столько «создаете веб-сайт», сколько собираете <div /> компоненты с помощью React, чтобы создать что-то большее, чем сумма его частей.

Сначала это кажется странным, но на самом деле это гениально. Я объясню, но сначала давайте посмотрим, почему паттерн MVC вообще существует. Меня учили, что его цель - создавать программное обеспечение, которое является достаточно модульным, чтобы позволить проводить рефакторинг на постоянной основе без необходимости переписывать целые части базовой логики. Другими словами, высокая сплоченность и низкая привязка классов.

Изучив модульное программирование с помощью React, я теперь вижу в этом парадокс. Для сравнения, паттерн MVC теперь кажется способом притвориться модульным с помощью структурного программирования. Такие языки, как Java, также, похоже, имеют слишком много накладных расходов, чтобы их можно было легко разделить на модули. Если мы хотим создавать модульное программное обеспечение, почему бы не использовать библиотеку, которая его поддерживает, вместо того, чтобы полагаться на абстрактный шаблон проектирования. Это все равно что учить нас вытирать что-то насухо влажной тряпкой.

Совершенно нормально переписывать классы, если они достаточно малы! Каждый день появляются новые технологии, которые могут быть полезны для вашего проекта. Возьмем, к примеру, Facebook. Им приходится каждый год заново изобретать себя, чтобы оставаться на вершине. Означает ли это приобретение Instagram, внедрение Facebook Live или откровенное кражу историй из Snapchat. Принуждение себя строить вокруг старых классов вместо того, чтобы удалять их и начинать заново, ограничит ваше творчество и в конечном итоге приведет к плохому коду.

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

И последнее о компонентах React: с JSX они действительно осмеливаются объединить бизнес-логику с HTML визуально ужасающим способом, которого мы не видели со времен PHP. Однако невероятным преимуществом является то, что вы можете понять один компонент с первого взгляда, без необходимости понимать остальную часть представления. Как следствие, это позволяет новому разработчику, незнакомому с проектом, принять эстафету и приступить к работе с первого дня.

Вкус ES6

Пока что это был только вкус, но я надеюсь, что на следующей неделе у меня будет больше времени, чтобы узнать об этом.

[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr, 0 );
//Output: 10

Эта функция сокращения работает, принимая входные данные (в данном случае список чисел) и рекурсивно добавляя их, чтобы получить одно значение, то есть сумму. Толстая стрелка => имеет большое значение, поскольку она сопоставляет входные данные слева с заданной операцией справа. Первоначально вам также необходимо определить начальное значение для добавления первого элемента списка, следовательно, второго аргумента. Оставьте это значение, и функция все равно будет принимать ноль.

Однострочные супер сексуальные

Переходя с Java, я никогда не любил однострочные (сюрприз). Почему бы просто не потратить еще 10 секунд на то, чтобы записать это, чтобы следующему парню не пришлось тратить в 3 раза больше времени на выяснение того, что вы имели в виду.

Но это действительно когда программирование становится поэзией, и React - одна из многих новых JS-библиотек, которая поощряет это. Давайте посмотрим на некоторые из моих любимых:

var isAvailable = (details.status === "available" ? true : false)
var buttonText = (isAvailable ? "Add To Order" : "Sold Out!")
<button disabled={!isAvailable}>{buttonText}</button>

Атрибут disabled был введен в HTML5 и делает кнопку неактивной. Если isAvailable равно True, React полностью опускает атрибут disabled из отображаемого HTML. Это позволяет нам создать единую кнопку, которая меняется в зависимости от наличия, с текстом «Добавить в заказ» или «Продано!».

//if order[key] is null, OR-logic will choose 1
this.state.order[key] = this.state.order[key] + 1 || 1

Вышеупомянутая строка является довольно эффективной заменой оператора if / else.

React ❤ Firebase

Firebase использует HTML5 Websockets, который творит чудеса с React. Как только состояние обновляется в Firebase, запускается событие, отражающее изменение в приложении. На гифке ниже Веб Бос показывает, как это работает на его локальном хосте после изменения имени рыбы в базе данных. Это изменение влияет на состояние всего приложения, поэтому, если вы внимательно посмотрите, вы увидите, что название рыбки также изменилось в разделе Инвентарь. Мне это показалось довольно волшебным, тем более, что для подключения приложения к Firebase требовалось всего 7 строк кода.

Создание для Интернета, мобильных устройств и не только

Философия React - учиться один раз, писать где угодно. Это напоминает мне рекламный трюк Java: «Напишите один раз, запускайте где угодно», что сделало его тот язык, который нужно было выучить 20 лет назад.

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

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

Это все! Спасибо за чтение. Увидимся на следующей неделе!

Подпишитесь на @arvinexplores в Instagram и Twitter для получения дополнительной информации.