Persisting a React.js app with the eZ

Platform JS Client API

Jani Tarvainen - September 20th 2016

About me - Jani Tarvainen• Working on the web professionally from 2000 in various roles in

development, support operations, management and consulting• By day I help people build the web at eZ Systems• By night I do things at Malloc for fun/profit• On Twitter: @velmu

What is React.js?• A JavaScript user interface library• Essentially a DOM abstraction• Can be rendered client or server side (using Node or phpV8js)• Build reusable hierarchical components• Learn more: https://facebook.github.io/react/

What is eZ JavaScript CAPI?• An abstraction of the eZ REST API• Very feature complete, allows rich functionality• Used by eZ Platform core, so it's here to stay• The server is always the gate keeper (via permissions)• Learn more: https://github.com/ezsystems/ez-js-rest-client

Using React and the CAPI• Allow developers to create rich applications without REST API calls or

DOM manipulation• Delegate heavy lifting & complexity to the libraries• Both eZ and React have a tree structure, so the mindset is the same• Note: React just has the view and requires more nuts and bolts

(routing, state management) for complex app creation

Some possibilities...• Building rich front end applications• Use Node.js as an aggregation platform• Open up a whole new market for eZ via a server JavaScript SDK• jQuery replacement for DOM manipulation

The grain of salt• CAPI needs to made be available from NPM and compatible with

Node.js• CAPI is not the latest JS, promises would make the syntax much nicer• CAPI API docs exists, but other than that docs could use some work• The eZ REST API can be quite chatty, thus sub optimal for all things• The React ecosystem can be quite overwhelming, so start simple

Demo time!• A simple app, with contemporary JS syntax and persistance via eZ

CAPI• You can think of the JSX syntax mixing HTML and JavaScript as an

inline PHP equivalent• Props and state:• Props for query parameters (location id, language, object type...)• State for domain objects (content, location...)

• Walkthrough: http://react.local/• Sauce code: https://github.com/janit/ez-react-todo

Alternatives to React and CAPI in implementation projects• React is hardly unique, there are other options: Angular2, Vue.js, or

anything else that's good JavaScript.• CAPI can be replaced with a purpose-built GraphQL API (using

GraphQLBundle) and a GraphQL client library like Apollo

Questions?• Thank you!• http://janit.iki.fi/ez-capi-with-react