Použití Next.js a Reactí UI khinihovny v aplikaci

POUŽÍTÍ NEXT.JS  
A  
REACTÍ UI KNIHOVNY V APLIKACI
MARTIN KRIŠTOF

MALÁ ROZCVIČKA - ABYCH VĚDĚL NA CO SE PTÁT :)
• Kdo z vás se považuje za Javascript vývojáře?
• Kdo z vás provozuje a napsal produkční aplikaci v Reactu (16.3)?
• Kdo z vás má v produkci aplikaci na Next.js (6)?
• Kdo používá Bootstrap 4 v produkční aplikaci?
• Kdo používá Redux v produkční aplikaci?
• Kdo používá Redux observables v produkční aplikaci?
• Kdo používá FlowType pro vývoj?
• Kdo z vás má vlastní UI knihovnu?
• Kdo z vás má vlastní UI knihovnu v Reactu?
• Kdo publikuje na NPM?
• Kdo se snaží psát funkcionálně?

REDESIGN APLIKACE
TECHNICKÝ
Custom dev stack -> Next.js
Upgrade na React 16.3.1
Upgrade dalších závislostí
VIZUÁLNÍ
Bootstrap 4 beta ->
UI knihovna v Reactu postavena
na ReactStrap

PŘECHOD NA NEXT.JS
•SPA v React-Redux -> Aplikace na Next.js
•Nová adresářová struktura
•Node.js ready
•Export do statických souborů
•Famózní Link router (nutný custom middleware pro redirect v
rámci aplikace)
•Prefetch
•Migrace na Yarn
•Next redux wrapper - využít getInitialProps()

ADRESÁŘOVÁ STRUKTURA
• Pages není v root, ale v src  
(nutno přidat parametr pro next build) 
next build src
• pages
• názvy stránek (index, login, …)
• services
• DI, config, API, utils, routing
• static - logger skript, další entries
• styles - SASS
• flow-typed - custom type definitions pro Immutable
• polyfill - immutable, set a map pro React 16

REACT REDUX • actions
• redux-observable epics
• helper metody
• state
• immutable state
• helper funkce (funkcionálně)
• reducer
• index
• container komponenta - HOC s connect
• App.js
• React komponenta (Pure)

NEXT.CONFIG.JS
module.exports = withBundleAnalyzer(
withSourceMaps(
withCSS(
withSass({
webpack(config, { isServer, buildId, dev }) {
const configOptions = config;
if (!dev) {
const originalEntry = configOptions.entry;
configOptions.entry = async () => {
const entries = await originalEntry();
if (entries['main.js'] &&) {
entries['main.js'].unshift('./polyfill/core-js.js');
}
return entries
};
}),
• kompozice pluginů
• https://github.com/zeit/next-
plugins
• možnost nastavit webpack
• Next.js se kompiluje 2x
(server i client)
• pozor na post-css -> v dev
zpomaluje kompilaci
Přidání polyfillů

NEXT.CONFIG.JS
• možnost exportovat do statických
souborů
• potřeba definovat exportPathMap
• getInitialProps je dostupná u top-
level pages s parametry:
• pathname
• query
• asPath
• store - Redux
• res
• req
exportPathMap() {
return {
'/': { page: '/' },
'/prihlaseni': { page: '/prihlaseni' },
'/email-odeslan': { page: '/email-odeslan' },
'/prihlasovani': { page: '/prihlasovani' },
…
};
},

NEXT.JS CLIENT
• Pozor na práci s browser objekty
• Export na neošetřené manipulaci s browser objekty nemusí doběhnout
export const isClient = typeof window !== ‘undefined';
const localStorage = isClient ? window.localStorage : LocalStorageMock;

NEXT.JS PAGE
import withRedux from 'next-redux-wrapper';
import Layout from '../components/Layout';
import Students from '../components/Students';
import { configureStore } from '../components/Admin/store';
const StudentListPage = () => (
<Layout>
<Students />
</Layout>
);
export default withRedux(configureStore)(StudentListPage);
Pouze v Top-level komponentně

NEXT.JS LAYOUT
render() {
const { children, isMenuVisible } = this.props;
return (
<>
<Head>
<meta charSet="utf-8" />
<title>…</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
…
</Head>
<Admin isMenuVisible={isMenuVisible}>{children}</Admin>
</>
);
}

NEXT.JS DOCUMENT
export default class MyDocument extends Document {
render() {
return (
<html lang="cs">
<Head>
<link
rel="stylesheet"  
href={`${publicRuntimeConfig.staticFolder}_next/static/style.css`} />
{isAppProdEnvironment() ? (
<script
src={`${publicRuntimeConfig.staticFolder}static/scripts/logger.js`} />
) : null}
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
…
publicRuntimeConfig: {
staticFolder: assetsPath
},

CUSTOM ROUTER MIDDLEWARE
export const routerMiddleware = (store) => (next) => (action) => {
if (action.type === ROUTE_CHANGE) {
if (isClient) {
Router.push(action.route, action.route);
}
}
if (action.type === ROUTER_REFRESH) {
if (isClient) {
window.location.reload();
}
}
next(action);
};

PSANÍ VLASTNÍCH UI KOMPONENT (DŘÍVE)
• vlastní bootstrap (UI)
komponenty
• nutná závislost
Bootstrapu a Sassu
• udržování CSS
• icon fonty
• proč?
const GridItem = ({ sm, md, lg, xl, children, className }) => {
const sizes = new Map({ sm, md, lg, xl })
.filter((size) => size > 0 || size === 'auto')
.map((value, size) => `col-${size}-${value}`)
.toList();
return (
<div className={cn(sizes.toJS(), className)}>
{children}
</div>
);
};

NOVÁ UI KNIHOVNA V REACTU
• postaveno na ReactStrapu - https://reactstrap.github.io/
• SASS v rámci UI - Bootstrap 4
• knihovna exportuje jak skripty, tak styly - Rollup
• Autoprefixer, PostCSS (Grid CSS i pro IE 10,11)
• dev na Webpacku
• vytvoření a otestování v rámci UI (responzivní)
• publikování na NPM
• dokumentace (pro UX a vývojáře)
• yarn add seduo-company-ui
• semver

UI KNIHOVNA  
- SEDUO-COMPANY-UI

UI KNIHOVNA - GENEROVÁNÍ ICON KOMPONENT Z SVG
Knihovna react-svg-icon-generator
yarn generate icons -> 
“yarn svg-icon-generate --svgDir ./assets/svg --destination ./src/components/
icons/SvgIcon.js --keepFillColor true”
Kromě toho i FontAwesome font

FLOW PŘI VÝVOJI
1.přidat React komponentu do src/components (definovat props)
2.přidat styly pro komponentu do src/bootstrap (SASS)
3.importovat a pak exportovat modul v src/index.js
4.přidat novou komponentu do dokumentace (example + properties)
5.změna v changelogu
6.navýšení verze v package.json
7.PR -> zabalení -> nasazení -> test -> merge do masteru -> tag
8.npm publish
"yarn prepare && yarn copy-dist”,
zkopíruje po buildu dist souborů do aplikace
“npm pack”
zabalí do tar souboru (pro nasazení na server bez publikace na NPM)

FLOW PŘI VÝVOJI
import Icon from './components/Icon';
import LinkButton from './components/LinkButton';
import ReactSelect from './components/Select';
import Heading from './components/Heading';
import Spinner from './components/Spinner';
import Cover from './components/Cover';
import Navigation from './components/Navigation';
import Footer from './components/Footer';
import SvgIcon from './components/icons/SvgIcon';
export { Alert, Container, Row, Navbar, NavbarBrand, …, Util } from ‘reactstrap’;
export { Icon, LinkButton, ReactSelect, Heading, Spinner, Cover, Navigation, Footer,
SvgIcon };

UŽITEČNÉ ODKAZY
• Rollup vs. Webpack https://medium.com/jsdownunder/rollup-vs-webpack-
javascript-bundling-in-2018-b35758a2268
• Next.js https://github.com/zeit/next.js/
• ReactStrap https://reactstrap.github.io/
• Seduo Company UI https://www.npmjs.com/package/seduo-company-ui
• Next Redux Wrapper https://github.com/kirill-konshin/next-redux-wrapper
• Migrace na Next https://blog.eleven-labs.com/en/migrate-a-react-client-
side-application-to-server-side-with-nextjs/

DĚKUJI 
ZA POZORNOST
Martin Krištof @Krejcek

Použití Next.js a Reactí UI khinihovny v aplikaci

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Použití Next.js a Reactí UI khinihovny v aplikaci

Ähnlich wie Použití Next.js a Reactí UI khinihovny v aplikaci (20)

Použití Next.js a Reactí UI khinihovny v aplikaci