Persisting a React.js app with the eZ Platform JS Client API
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