�ݺ�ߣ

Rafał Filipek
Frontend & Platform Architect / Team Leader

Platforma Kontentowa
Jak chcemy wprowadzić hybrydowe aplikacje w 150 serwisach.
React, NodeJS i przyjaciele

Apetyt rośnie
• Rewitalizacja 150 serwisów
• Szybkość
• Więcej klików, dłuższy czas wizyty
• Krótszy development
• $$$

Kilka faktów
• 10 tygodni
• dwie lokalizacje
• 3 osoby od “frontendu” (2 x junior dev + ja)
• API tworzone od zera
• system do deploymentu in progress

Jak?
WP kobieta
NodeJS 6.xAPI
Backend
* w uproszczeniu
*

f(s) = UI
f(s) = g(s1) + h(s2) … z(sx) = UI

renderToString(
<Provider store={store}>
<RouterContext {...props} />
</Provider>
)
ReactDOM.render(
<Provider store={store}>
<Router routes={routes} history={browserHistory}
render={applyRouterMiddleware(useScroll())} />
</Provider>,
document.getElementById(id)
) client
server

classnames by Jed Watson
npm.im/classnames
❤
CSS

CSS
import styes from './Teaser.css'
import cx from 'classnames'
const Teaser = ({ title, img, important, visited }) => (
<div className={cx(
{
[styles.visited]: visited,
[styles.hot]: important
},
styles.wrap
)}>
{ /* ... */}
</div>
)
<div
class="_3W-1w _37ZLm _2Anks"
style="background-color:#000;"
data-reactid=“186"
>
stuff
</div>

import { createStore } from 'redux'
const counter = (state = 0, action) => {
if (action.type === 'INCREMENT') return state + 1
if (action.type === 'DECREMENT') return state - 1
return state
}
const store = createStore(counter)
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })

state: {
teasers: { lists }
content: { items }
comments: {
comments, userComments, lists, replies,
votes, top, reports, scroll, counters,
info, settings
}
reactions: { votes, items, fb, instagram, twitter shoplov }
adv: { ima, rc }
ui: { menuVisible, headerFixed }
}

// okeyish
export default connect((state) => {
return { a: state.foo.a, b: state.bar.b }
})(View)
// good
const selector = createSelector(
(state) => state.foo.a,
(state) => state.bar.b,
(a, b) => {
return { a, b }
}
)
export default connect(selector)(View)
npm.im/reselect
reselect by ReactJS

Dane i API
import { actions } from 'pkf-teasers'
import { trigger } from 'redial'
import { provideHooks } from 'redial'
/* ... */
export const hooks = {
fetch: ({ dispatch }) => (
Promise.all([
dispatch(actions.fetch('dla-ciebie')),
dispatch(actions.fetchSections())
])
),
defer: ({ dispatch }) => {
Promise.all([
dispatch(actions.fetch('dla-ciebie')),
dispatch(actions.fetchSections())
dispatch(actions.fetch('najnowsze')),
dispatch(actions.fetch('popularne', { count: 20 })),
])
}
}
/* ... */
const App = provideHooks(hooks)(View)
trigger('fetch', App).then(() => renderToString(<App />))
npm.im/redial
redial by Mark Dalgleish

• pkf-kobieta
• pkf-app
• pkf-comments
• pkf-commons
• pkf-content
• pkf-social-reactions
• pkf-teasers
Pakiety
"pkf-app": “… pkf-app …”,
"pkf-comments": "… pkf-comments …”,
"pkf-commons": "… pkf-commons …”,
"pkf-content": "… pkf-content …”,
"pkf-social-reactions": "… pkf-social-reactions …”,
"pkf-teasers": "… pkf-teaser …”,

pkf-kobieta
• config.js
• client.js
• server.js
• pliki statyczne
import './styles.css'
import './config.js'
import { runClient } from 'pkf-app/lib/run-client.js'
import './config-analytics.js'
if (process.env.NODE_ENV !== 'production') {
const Perf = window.Perf = require('react-addons-perf')
Perf.start()
}
runClient()
import './styles.css'
import { runServer } from 'pkf-app/lib/run-server.js'
import { setConfig } from 'pkf-app/lib/config.js'
import { configs } from './config.js'
setConfig(configs)
runServer(process.env['APP_SERVER_PORT'] || 3000)

Biblioteki
Hammer.js i WPJSLib
npm.im/hammerjs
hammerjs by Alexander Schmitz

Biblioteki
export class Video extends React.Component {
// ...
componentDidMount() {
this.player = WP.player({ url: this.props.url, target: this.el })
window.wp_player_osadzony = 1 // Przepraszamy internet za nazwę
}
shouldComponentUpdate() { return false }
componentWillUnmount() {
if (this.player) {
this.player.destroy()
this.player = null
window.wp_player_osadzony = 0 // Jeszcze raz sorry
}
}
render() {
return <div ref={(ref) => { this.el = ref }} id={this.getId()}></div>
}
}

SEO
Dostępność
• Statycznie renderowany html
• Dodatkowe części serwisu renderowane po stronie
serwera tylko dla botów
• Stronę można przeglądać bez JS
✔
✔
✔

SEO
og:image
twitter:image
article:published_time
al:ios:url
og:url
og:type
og:title
og:description
twitter:url
canonical
twitter:card

SEO
<Helmet
title="My Title"
meta={[
{"name": "description", "content": "Helmet application"},
{"property": "og:type", "content": "article"}
]}
link={[
{"rel": "canonical", "href": "http://mysite.com/example"}
]}
script={[
{"src": "http://include.com/pathtojs.js", "type": "text/javascript"},
{"type": "application/ld+json", innerHTML: `{ "@context": "http://schema.org" }`}
]}
onChangeClientState={(newState) => console.log(newState)}
/>
npm.im/react-helmet
react-helmet

Responsywność
• ~80% komponentów jest współdzielona przez desktop i mobile
• 100% logiki w innych warstwach jest współdzielone

Statystyki
reklamy
analyticsEventDispatcher({
action: 'page:view',
dot: /* ... */,
gfk: /* ... */,
gemius: /* ... */
})
advertisementEventDispatcher({
action: 'bunch:load',
dot: {
bunch: 'index'
}
})

Na co uważać
• Trzeba poświęcić czas na budowę środowiska
developerskiego
• HTML + CSS != React + css
• warstwa danych (kontrola)
• “Śmietnik” w widoku

Co się zmieniło
• Jakość
• Czas developmentu
• Obszary “zainteresowania” programistów frontend /
backend
• Zbliżenie do aplikacji mobilnych
• Morale :)

Dalszy rozwój
• nowe funkcjonalności
• zmiana podejścia do CSS
• optymalizacje
• service workers

�ݺ�ߣ

Platforma Kontentowa

Recommended

More Related Content

What's hot (20)

Similar to Platforma Kontentowa (20)

Platforma Kontentowa

Editor's Notes