Всем привет! Возможно, вы слышали или не слышали о React Native. Может, уже 2 недели пользуетесь? 2 месяца? Год? Каким бы ни был ваш уровень опыта: я написал это только для вас!

Хорошо, Чарльз, можно нам дать контекст?

Тогда позвольте мне вкратце описать мою предысторию. Я студентка 3 курса HETIC в Париже, Франция. Я написал свои первые строки кода на React Native в середине 2015 - начале 2016 года. В то время мой уровень JavaScript был не так хорош ... где-то между 0,5 и 0,7 ... по 10-балльной шкале ... Другими словами:

Я действительно (очень-очень) начал снизу ...

Но я знал, что хочу создавать мобильные приложения, и это было очень интересным началом. Так что я попробовал и написал свое первое приложение React Native, которое - вопреки всем ожиданиям - работало (но код был просто… о боже…). Интересный факт: React Native в то время был горячим от прессы!

{
  "name": "MinionsGo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh"
  },
  "dependencies": {
    "react-native": "^0.5.0"
  }
}

Я представил его как часть классного проекта на первом курсе HETIC перед всем моим повышением по службе, и мои одноклассники были очень впечатлены результатом. Я не понимал весь код, который написал, но был так взволнован: он был функциональным! С этого момента я влюбился в React Native, но кое-что стало очевидным:

Мне нужно было изучить JavaScript, прежде чем изучать React

Если вы извлечете из этой статьи только одно, пусть будет следующее: научитесь писать красивый код JavaScript, прежде чем изучать React. Все станет намного проще, потому что вы намного лучше поймете, что пишете, и сможете улучшить свою работу более эффективно.

Но еще до этого мне пришлось освоить основы HTML и CSS. Как я уже сказал, я действительно начал снизу, но даже я понял, что пробираться по ступеням - не лучшая идея. Вот как - еще до того, как погрузиться в экосистему JavaScript - я начал часами проводить за компьютером каждую ночь после школы, изучая классный модуль макета CSS3 под названием… Flexbox.

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

React Native был очень многообещающим, но я почувствовал беспокойство в силе: как я смогу узнать, насколько он разрушителен, если мне не с чем его сравнить? У меня было несколько вариантов решения этой проблемы: Ionic / Cordova, NativeScript, Java, Swift… Итак, давайте сделаем это!

Ионный / Кордова

Как гласит пословица: «Как только вы перейдете на React, вы никогда не вернетесь назад». Поэтому было действительно сложно получить удовольствие от WebView, предлагаемого Ionic / Cordova, поэтому я не смог дойти до конца ...

NativeScript

Я пошел дальше, чтобы попробовать NativeScript. Они обещают то же, что и React Native: «Используйте Angular, TypeScript или современный JavaScript, чтобы получить действительно собственный интерфейс». Но мне это показалось немного… менее привлекательным…

На мой взгляд, процент кода, разделяемого между iOS и Android, был слишком низким, а некоторые файлы были для меня слишком похожи на XML. Однако NativeScript позволяет использовать простой CSS, что действительно интересно для тех, кто имеет опыт разработки Front-End. Вероятно, все изменилось с тех пор, как я последний раз его использовал, так что попробуйте!

Быстрый

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

Для молодого Front-End разработчика кривая обучения была зашкаливающей!

import UIKit
class ViewController: UIViewController {
  @IBOutlet weak var slider: UISlider!
  @IBOutlet weak var targetLabel: UILabel!
  @IBOutlet weak var scoreLabel: UILabel!
  @IBOutlet weak var roundLabel: UILabel!
  
  ...
  
  func updateLabels(){
      targetLabel.text = String(targetValue)
      scoreLabel.text = String(score)
      roundLabel.text = String(round)
  }
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    startNewGame()
    updateLabels()
    
    let thumbImageNormal = UIImage(named: "SliderThumb-Normal")
    slider.setThumbImage(thumbImageNormal, forState: .Normal)
    
    let thumbImageHighlited = UIImage(named: "SliderThumb-Highlited")
    slider.setThumbImage(thumbImageHighlited, forState: .Highlighted)
let insets = UIEdgeInsets(top: 0, left: 14, bottom: 0, right: 14)
    
    if let trackLeftImage = UIImage(named: "SliderTrackLeft") {
        let trackLeftResizable = trackLeftImage.resizableImageWithCapInsets(insets)
        slider.setMinimumTrackImage(trackLeftResizable, forState: .Normal)
    }
    if let trackRightImage = UIImage(named: "SliderTrackRight") {
        let trackRightResizable = trackRightImage.resizableImageWithCapInsets(insets)
        slider.setMaximumTrackImage(trackRightResizable, forState: .Normal)
    }
...
}

Но я должен признать, что мне было очень весело заниматься этим. Swift был во многом похож на JavaScript, а Xcode оказался очень полезной IDE (если вы знаете, куда нажимать!). Это был мой первый опыт работы со Swift, мой код был далек от совершенства, но через несколько дней я смог написать функциональное, хотя и простое приложение для iOS на Swift, и это было довольно круто! Если вам интересно, вы можете взглянуть на это прямо сейчас.



CharlesMangwa / BullsEye
BullsEye - игра для iOS, чтобы расслабиться в свободное время. github.com



Итак, как насчет вашего опыта работы с React Native?

Оттуда я знал, что React Native - это то, что мне нужно. В течение прошлого года я работал над 5-6 различными приложениями, чтобы посмотреть, может ли React Native удовлетворить потребности реальных сценариев. И ответ: ах да! День за днем ​​я вижу все больше приложений, созданных с помощью React Native! Больше всего радует то, что пользователи не видят никаких различий с нативным приложением! Таким образом, я получил некоторую обратную связь:

  • Отличная архитектура - ключ к успеху. Иногда ваш код может выглядеть слишком сегментированным, но возможность поделиться компонентом, просто скопировав / вставив папку, - это довольно здорово. Очевидно, что люди делают что-то по-другому, но разделение моего кода на несколько файлов и папок помогло мне сделать мои файлы JavaScript как можно короче. Основная причина заключалась в отладке: в длинном и сложном файле гораздо сложнее увидеть, где находятся ваши ошибки ...
  • Берегите своего редактора, он вернет вам услугу. Как бы безумно это ни звучало, я понял, что настройка редактора повысила мою продуктивность. Я перешел с Sublime Text на Atom именно по этой причине и пока не жалею о своем выборе. Чем удобнее вы будете работать с редактором, тем лучше для вас!

  • Всегда, всегда бросайте вызов самому себе! По моему скромному мнению, лучший способ добиться прогресса - это всегда думать о том, что вы можете улучшить свою работу. Нет ничего идеального, наша работа тоже. Подобное мышление поможет вам улучшать свои навыки день за днем, строка за строкой. Следите за сообществом, смотрите, как развиваются языки, участвуйте и создавайте фреймворк, который вы используете, шаг за шагом вы обнаружите свои собственные передовые методы.
    Посмотрите, например, это руководство Airbnb по JavaScript, вы можете найти много интересного:


airbnb / javascript
javascript - Руководство по стилю JavaScript github.com



  • Линт на fly ftw. ESLint - это линтер JavaScript, который поможет вам поддерживать однородность кода благодаря различным правилам, которые вы устанавливаете. Все, что вам нужно сделать, это установить плагин в свой редактор и настроить правила в файле .eslintrc в корне каталога вашего проекта. Самое интересное, что вы также можете использовать правила, написанные другими людьми.
// .eslintrc
{
...
  "extends": [
    "airbnb",
    "plugin:flowtype/recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "babel",
    "react",
    "flowtype"
  ],
...
}

Теперь Atom покажет мне ошибку, если я не буду следовать правилам, установленным Airbnb, Flow или React, и это очень удобно!

  • «Flexbox все…!» В общем, меня это бесило, когда я понял, что React Native использует алгоритм Flexbox для компоновки своих компонентов. Это возвращает нас к тому, что я сказал несколькими строками ранее: сначала овладейте основами, вы будете так гордиться собой в будущем. Поэтому создание нужного мне пользовательского интерфейса кажется намного проще.

  • Удачи 🎉! Это, без сомнения, самый важный. Пока вам нравится то, что вы делаете, вы проявляете любопытство и критически относитесь к своей работе, вы будете извлекать уроки из своих ошибок и двигаться вперед.

Эта статья - результат изучения JavaScript и React в течение 2016 года. Мои отзывы могут сильно отличаться от того, что вы имеете или будете испытывать, но я подумал, что обмен ими может быть в некотором роде полезен. Спасибо, что нашли время прочитать мою статью. Надеюсь, она вам показалась интересной.
Особая благодарность Эрику Владу Висенти, который дал мне необходимую мотивацию для написания этой статьи, и Тео Кунец за отзыв!
Если у вас есть вопросы или отзывы, я буду ждать вас в Twitter 😄