30 октября 2016 в 23:46

Каково это, на самом деле, писать на JavaScript в 2016 году из песочницы

Данный текст является переводом ответа Кристиана Ристовски на статью «Как оно учить JavaScript в 2016»

Мне нужно создать страницу, которая отображает последние действия со стороны пользователей, так что мне просто нужно получить данные от REST и отобразить их в какой-то фильтруемой таблице, ну и обновлять её, если что-то изменится на сервере. Я думал, может быть, использовать JQuery для извлечения и отображения данных?

— Конечно, ты все еще можешь использовать jQuery. Но если ты собираешься в будущем писать что-то посложнее, то тебе, наверное, стоит попробовать React. Он будет очень полезен тебе в будущем.

— Звучит не плохо. Как начать работать с React?

— Самый простой способ — это написать npm install create-react-app -g в терминале и можешь сразу начать работать над проектом.

— Круто, т.е. ты хочешь сказать, что я не должен ничего дополнительного устанавливать?

— Неа.

— А мне нужно устанавливать какие-то специальные IDE например Visual Studio, Android Studio, или Xcode?

— Нет. Просто cd в папку с приложением и начинай с npm start. На этом все.

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

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

— Выглядит очень полезным. Похоже это может немного ускорить разработку. Но подожди, что если я хочу опубликовать свой сайт? Просто больше никто не публикует index.html, app.css, main.js не минифицированные, так ведь?

— Ага, ты прав. Если ты когда-нибудь захочешь опубликовать свой сайт, просто запусти npm run build и все что тебе нужно будет лежать в твоей/build папке. Минифицировано, оптимизировано и полностью готовое к публикации.

— Спасибо, было очень познавательно.

*Занавес опускается, звучат аплодисменты, крики из зала. Наши 2 разработчика кланяются, пожимают руки и улетают на драконах в закат*

Давайте получать удовольствие и немного больше делиться позитивными и радостными моментами в JS сообществе.

» Оригинал ответа
Иван Калинин @To_wave
карма
3,0
рейтинг 0,0
FrontEnd Developer
Самое читаемое Разработка

Комментарии (45)

  • +10
    create-react-app стал серебряной пулей для frontend? А если мне хочется использовать typescript? Или Dan Abramov переосмыслит flux еще раз? Так жестко завязываться на еще один проект для быстрого старта — опасно, как мне кажется.
    • +7
      Кто такой Дан Абрамов и почему у него столько группи?
      • 0
        Я выпал! Мог бы поставить 5 плюсов, поставил бы, за «группи».
        • 0
          А я не понял про «группи» :(
          • +3
            «Ааа! Дан снова написал, что раньше мы все делали неправильно и сейчас так уже не делают. Надо написать ему в твиттер, что мы срочно перешем наш код на новую парадигму, чтобы быть современными!»
    • 0
      eject и пили свои костыли. Я вот отточил настрою вебпака до идеала и смысла во всех этих бойлерплейтах не вижу, если только не универсальный бойлерплейт, где нужно наворачивать костыли, что бы на сервере можно было сделать импорт стилей и картинок в компонентах
      • +1

        Не поделитесь идеальными настройками?

        • 0
          Извиняюсь за ошибки в своем комментарии
          github.com/yogurt1/hotux
          Boilerplate с процессе разработки, но тут можете увидеть, что вся конфигурация webpack умещается в одном файле на 205 строк
          Конфиг универсален для всех сред — клиент, сервер, тесты Karma
          В будующем планирую расширить до React Native, Electron и поддержки других библиотек и фреймворков, кроме React
          Хуки для импорта компонентов на сервере находятся в файле boot.js
          Буду рад пожеланиям и исправлениям
  • 0
    Использую сейчас на проекте create-react-app. Там много чего не поддерживается, хотя в принципе настроить на webpack это несложно(почти). И вообще webpack (в том числе вышеупомянутый конфиг) не серебреная пуля. Почти удобно. Но реализация немного хромает.
    • 0
      Тем не менее ничто не мешает сделать
      npm run eject
      
      и допиливать.
      • 0
        Так теряется главная идея.
  • +9
    Удивительно бесполезный пост про jquery, судя по тэгу. Хорошо хоть одно слово в статье есть про него. Так скоро будет не найти толковых технических статей, если по ключевым тэгам будут такие публикации выкладывать.
  • +8
    — Круто, т.е. ты хочешь сказать, что я не должен ничего дополнительного устанавливать?

    Ну да, не считая npm, кучи зависимостей для указанного модуля и, соответственно, нехилого количества кода, в котором может быть что угодно.
    Npm мне друг, но истина — дороже (С)
  • +6
    Если ты когда-нибудь захочешь опубликовать свой сайт

    Именно "если", а не "когда"? ;-)

    • +3
      Я давно заметил, что есть такой тип программистов, которые «пишут в стол». Точнее, «пишут в битбакет». Есть у них какая-то своя бредовая идея, и вот они, под бутылочку пива, нервно хихикая вечерами что-то кодят.

      Вот есть конкретный пример. Знакомый, который третий год пишет «убийцу секснарода». Я через него об этом секснароде и узнал. Судя по его рассказам, его проект использует всегда все самое передовое и на порядок превосходит конкурента. Правда когда первый деплой, пока не совсем понятно.
      • +6
        Не всё так мрачно. Ваш знакомый оттачивает свои навыки и продаёт их на реальных проектах. А это хобби, как у женщин плетение бисером или непродаваемые картины. А после деплоя, он станет заложником своего проекта и ему придётся отвлечся от пива в пользу маркетинга своего проекта, допиливания фич и выпиливания багов, сопровождения юзера, оформления ИП для окупания проекта… Он очень боится своего успеха.
        • +1
          Я никого не осуждаю… но как по мне, бояться нужно спида, войны, рака, жениться на дуре, детей от левого мужика, отказа тормозов на большой скорости, межпозвоночной грыжи и еще клоунов-карликов. Но никак не успеха.
          • 0
            Просто для него это не успех.
  • 0
    — Но я же должен собирать свое приложение и долго ждать пока оно пересобирется каждый раз, когда я что-нибудь поменяю?

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


    Ответ совершенно не отвечает на вопрос. Да ещё и неправильно ответили. Ибо по любому придётся немного, но ждать.
    • 0
      Аж целые 200 мс на передачу модуля по WebSocket
      Ах да, 15 мс на инъекцию во всех другие модули
      • 0
        Нет. Часто сборка и компиляция проекта может занимать секунды. Ждать 3 секунды каждый раз, когда отредактировал js код? Это долго.
        • 0
          Если обновился модуль, то собирается только он сам
          Это длится не больше четверти секунды, если модуль очень жирный и от него зависят другие модули
          https://webpack.github.io/docs/hot-module-replacement-with-webpack.html
  • +1
    Написал npm install create-react-app -g, а затем в папке «C:\js» написал npm start. Как теперь посмотреть проект? Где я могу что либо поменять, чтобы оно само обновилось? В папке создался только npm-debug.log в котором ничего вразумительного. Что я делаю не так?
    • +11
      > *Занавес опускается, звучат аплодисменты, крики из зала. Наши 2 разработчика кланяются, пожимают руки и улетают на драконах в закат*
    • +1
      Рассказали через личку, оказывается нужно еще было сделать «create-react-app имя-проекта»
  • +2
    Ну если бложик написать или там лендинг, то пойдёт.

    А если что-то серьёзное, то вся эта автоматизация идёт лесом и тонет под горой левых зависимостей и требований.
  • +6
    Да хватит уже.
  • +2
    А я наоборот: с большим удовольствием ушёл от Python+Django к Golang+httprouter. Пишу вручную код SQL для создания таблиц, думаю об оптимизации, генерирую SQL-запросы без всяких ORM, текущий проект (система учёта посещений для внутреннего пользования одной конторы) делаю вообще без единой строчки JS на данный момент и доволен этим. Формы, GET/POST/DELETE, аутентификация через cookie, https, красивый шрифт и щепотка css — больше ничего не надо
    • +8
      Я думал, в конце вы расскажете, как посадили картоху у себя на участке, а с будущей весны будете разводить коров и генерировать биогаз, чтобы быть полностью энергонезависимым.
  • +11
    а теперь, рубрика «вместо тысячи слов». create-react-app устанавливает в node_modules примерно 750 библиотек общим весом больше 100 мегабайт
    • +1
      Это всё библиотеки созданные Фейсбуком?
      • –1
        Нет, тут всё дело в корявости npm.
      • +2
        нет конечно, там просто какая-то куча мусора из npm. Например, https://www.npmjs.com/package/is-primitive — посмотрите исходники этого чуда и поразитесь
        • +2
          А если хозяин этого is-primitive вдруг закоммитит новую версию, согласно своим новым представлениям о примитивах, то он сломает чужой create-react-app?
          • 0

            Да.

          • 0
            На этот случай предусмотрен такой костыль, как npm shrinkwrap.
    • –1
      И что? Они устанавливаются одной командой и никак не усложняют процесс разработки.
    • 0
      Компилер, парсер, трансплайер, минификатор, статический анализатор JS
      Lodash, React, Webpack
      В этом нет ничего страшного, это нормально
      Поставь с десяток пакетов по ключевому слову React и у тебя вырастит папка node_modules аж на 5 мегабайт!
      Иногда стоит запускать npm dedupe и npm prune, что бы удалить дупликаты и выпилить лишние пакеты, от которых ничего не зависит
      Пора бы уже научится использовать npm или не использовать его вообще, как и все, что связано с JS
  • +2
    Да блин, ну вы о чём?? Ну будет солдатик сидеть перед развёрнутым ракетным комплексом, а дальше то, что? Ему надо направить (роутинг), прицелиться (контроллеры), найти снаряды (модель) и уже только тогда «увидеть» результат! Нужен ли ему в 2016 году ракетный комплект, вот в чём вопрос?

    Каково это, на самом деле, писать на JavaScript в 2016 году?
    1. Определить цели и задачи, которые должно решать приложение;
    2. Выбрать инструмент, который позволит решить цели и задачи из пункта 1;
    3. ...
    4. Profit
  • 0
    На мой взгляд, никогда не будет такой вот серебренной пули. Каждый проект это мозайка, в которой части обладают своеобразной формой и собираются только в определенном порядке.
    Самое простое решение: написать для себя, свой «npm i -g silver-bulltet», который будет создавать для Вас основу именно всех Ваших проектов.

    Тот факт что я прав, доказывают комментарии. Люди пишут что там чего-то нет. А если там все будет, это его никто не будет использовать, по-скольку тащится за «пулей» два состава и тележка «на всякий случай, вдруг кто-то хочет экзотики». Не надо так, эту роль всегда выполняет npm, а Вы просто собираете свой собственный паровоз с блэк-джеком и экзотикой.

    p.S. публиковать этот Ваш silver-bulltet не надо от слова совсем, он удобен только конкретно Вам.
  • 0
    — Неа. Если ты делаешь изменения на странице, то она автоматически обновится для тебя. Если ты немного меняешь CSS, то он будет перезагружен на лету, без полного обновления страницы.


    Будет, но не все части приложения могут быть так перезагружены, поэтому периодически обновлять страницу всё-таки придется.
  • +1
    Отговорили! Даже не буду начинать писать на js в 2016,… и во-вторых, уже 2017 скоро начнется, может что-нибудь придумают получше.
    • +2
      А сегодня в завтрашний день не все могут смотреть (с)
  • +2
    — Самый простой способ — это написать npm install create-react-app -g в терминале и можешь сразу начать работать над проектом. Если ты делаешь изменения на странице, то она автоматически обновится для тебя. Если ты немного меняешь CSS, то он будет перезагружен на лету, без полного обновления страницы.
    — Круто, а как это работает под капотом?
    — Э-э-э-э…
    — А чем отличается абстрактный класс от интерфейса?
    — Слушай, ты сайт хотел? — на сайт, отстань со своими вопросами!
    • 0
      С другой стороны, далеко не каждый автодилер (или сотрудник СТО) может толково объяснить сущность цикла Карно. Возможно, такие процессы справедливы для любой развивающейся и усложняющейся отрасли.

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