tm nextjs starter
1.0.0
Это мой минимальный, но функциональный стартовый набор React и демонстрационное приложение по состоянию на август 2018 года.
Если вы устали от Javascript и хотите быстро и легко приступить к работе, взгляните на это. Разработка современного приложения SPA React не может быть намного проще.
Демо-приложение представляет собой статический сайт, базовое одностраничное приложение с несколькими адресуемыми страницами, которые загружаются по требованию. Он демонстрирует основные операции CRUD: 1) список фильмов, 2) просмотр сведений о фильме, 3) создание/редактирование и 4) удаление фильма.
Демо использует localStorage браузера для хранения данных, что означает, что он работает без бэкэнда. Исходники содержат модуль, который выполняет реальные вызовы AJAX к серверной части REST — вам просто нужно включить модуль и написать сервер, и вы уже на пути к созданию настоящего веб-приложения. Я разработал сервер REST API RESTPie3 Python, который в качестве примера реализует этот простой API фильмов.
Демонстрационное приложение состоит из простого, но мощного технологического стека, обеспечивающего основные функции для создания современных веб-приложений. Он стоит на плечах нескольких великих библиотек:
├── /components/ # React components used by pages
│ └── /MyHeader.js # Site header component, just as an example
├── /pages/ # pages
│ ├── /_app.jsx # top level layout of the app, loaded once
│ ├── /about.jsx # about page
│ ├── /index.jsx # home page, lists movies
│ ├── /moviedetails.jsx # details page, views a movie
│ └── /movieedit.jsx # edit page, edits a movie
├── /static/ # static assets, accessed/exported as is
│ ├── /favicon.ico # favicon
│ └── /exampledata/
│ └── /movies.json # sample list of 4 movies - loaded initially
├── /styles/ # global SASS files
│ └── /layout.sass # main layout
├── config.js # app config, select ajax or localstorage
├── next.config.js # nextjs configuration, almost empty
├── package-lock.json # npm something
├── package.json # list of npm packages required
├── README.md # this doc
├── serverapi_ajax.js # API, talks AJAX to a real backend
├── serverapi_localstorage.js # API, talks to localStorage
└── store.js # data store, managed by MobX
Вот как запустить стартер на локальном компьютере:
$ git clone https://github.com/tomimick/tm-nextjs-starter
$ cd tm-nextjs-starter
$ npm install
$ npm run devЗатем укажите в браузере http://localhost:3000.
При изменении любого из зависимых файлов изменения загружаются в горячем режиме и мгновенно становятся видимыми. Наслаждайтесь разработчиком!
Nextjs — отличный фреймворк, который вносит необходимый порядок в хаотичную сферу разработки Javascript. Это упрощает начало разработки React, заботясь о конфигурациях и инструментах, позволяя вам с самого начала сосредоточиться на основном приложении. Он обеспечивает хорошо спроектированную минимальную базовую функциональность, которая практически необходима всем веб-приложениям.
Кратко о преимуществах Next.js:
Nextjs достаточно зрелый, был выпущен около 2 лет назад и имеет здоровую экосистему плагинов. Webpack используется для основной работы.
Вполне возможно и вероятно, что Nextjs будет заменен или объединен с чем-то еще лучшим в будущем, но сейчас он включает в себя несколько лучших практик, поэтому его стоит попробовать.
Redux обычно является первым решением для управления состоянием приложений React. Это была одна из первых доступных библиотек, о которой говорится во многих блогах, и поэтому она приобрела почти стандартный статус.
С самого первого знакомства с Redux у меня были смешанные чувства. Мне всегда нравится думать и проводить исследования самостоятельно, и после прочтения множества баз кода React+Redux, оценки других вариантов я думаю, что Redux с его функциональной и чистой парадигмой кажется мне немного абстрактным и перегруженным. (Плюс Redux также используется там, где он просто не нужен. Слишком легко переборщить.)
На мой взгляд, MobX предлагает более простое и практичное решение для управления состоянием, чем Redux. Легче взять и понять. Для этого требуется меньше шаблонного кода. У вас есть состояние, которое вы объявляете наблюдаемым, затем просто измените свое состояние, и все наблюдатели автоматически обновятся. MobX работает и не мешает.
Инженеры спорят, лучше ли Redux для более крупного приложения или для «настоящего» приложения, но это бесконечная битва. Моя стратегия обычно состоит в том, чтобы мой код был простым и грубым, даже не пытаясь создать «большое» приложение...
Nextjs обеспечивает поддержку как глобальных, так и локальных таблиц стилей CSS сайта.
style jsx (см., например, about.jsx).В этой демонстрации я также экспериментирую с функциональностью сетки CSS, которая является недавним стандартом веб-разметки. CSS-сетка — это мощный инструмент макетирования, который, наконец, обеспечивает надежный способ определения двумерной сетки. Это изменит способ построения макетов. Если вы еще не узнали или не читали о CSS-сетке, 2018 год — подходящее время для этого. Поддержка браузера уже очень хорошая. Скоро это станет мейнстримом.
Возможность создания статического сайта с помощью Nextjs — важный инструмент, позволяющий запускать приложения без внутреннего сервера. Вы можете экспортировать сайт на страницы GitHub, Netlify или Amazon S3. (Но проверьте несколько ошибок с префиксами сайт+ссылка на страницах Github.)
Еще одно преимущество статической генерации — возможность подключить приложение к любому серверу REST, независимо от того, на каком языке он работает. Четкое разделение внешнего и внутреннего интерфейса также обеспечивает модульность на техническом уровне и, возможно, на уровне команды.
Одно замечание по поводу SEO: для экспорта статических версий страниц с динамическими данными вам потребуется создать скрипт для всех страниц в конфигурации next.config.js, см. этот пример.
Чтобы создать статический сайт, просто запустите
$ npm run export И статические файлы будут созданы в папке out .
Чтобы протестировать статический сайт локально через локальный www-сервер, я быстро запускаю скрипт Python: (python3 -m http.server)
$ npm run pyserveА затем протестируйте сайт по адресу http://localhost:8000.
Размер домашней страницы приличный, около 94 КБ, минифицированный и заархивированный .
Браузер загружает домашнюю страницу в общей сложности 6 запросами, и каждая новая страница, загружаемая по требованию, выполняет один js-запрос один раз (помните, что в React все дело в Javascript, а не в HTML).
Page Size Inspector Report
URL: https://nextjs.tomicloud.com/
REQUEST REQ BYTES
TOTAL___________________________________________6____94,159
Document________________________________________1_______916
-nextjs.tomicloud.com/ 916
Script__________________________________________4____92,836
-nextjs.tomicloud.com/_next.../index.js 1,053
-nextjs.tomicloud.com/_next/.../_app.js 2,506
-nextjs.tomicloud.com/_nex.../_error.js 2,490
-nextjs.tomicloud.com/.../main-6a4a..js 86,787
Stylesheet______________________________________1_______407
-nextjs.tomicloud.com/_nex.../style.css 407(Отчет моего инспектора размера страницы расширения Chrome.)
Возьмите этот стартер React и, возможно, мой сервер REST API RESTPie3 Python и создайте свой отличный сервис.
Вы также можете связаться со мной и узнать, готов ли я работать фрилансером.
Если вы предпочитаете Vue React, я также написал этот же стартовый код с помощью Vue Nuxtjs.
Лицензия MIT
