This evolutionary event was a continuation of already well-established behind-the-scenes topics – jQuery is in WordPress since version 2.2.0, Underscores and BackboneJS is a standard part of the WP core since version 3.4.1 (2012), and Andrew Nacin even before Matt Mullenweg hinted the wave of change…
There are many such articles and conferences on the subject, and for good reason…We no longer have obstacles in loading complex 3D models, live-stream videos, layered navigation or animated-interactive presentations of content. For example, the second article in the series describes how you are free to create a 3D web game that has the WordPress REST API as a backend.See the Pen Chill the lion by Karim Maaloul (@Yakudoo) on CodePen.
- Start with BackBone – the framework is already included in the WP core itself and the entire media library has been created with it.
- When you decide on a framework, give it a chance and master it well. In general, you can create all kinds of applications with Angular, Backbone, and React.
- Read Adam White’s great presentation and video on Backbone programming for WordPress.
2. Designers of more interactive media
Web designers have plenty of tools to choose from – Sketch, PS, AI and now the new xD. In addition, Invision, Marvell, Framer, Figma, Canva, Muse… New creatives are expected to also master HTML / CSS / JS and to educate clients, developers and project owners. Truly demanding times (and very similar to the JS world of developers from point 1). A plethora of tools and new techniques leads to the accumulation of functions, animations and general chaos among interactive solutions, breaking probably all the rules of Dieter Rams.
Modern WP web design is complicated and immature, but the WordPress community has some tips for creating an interactive experience:
- In animations and interactivity, less is more.
- Create little by little and build on elaborate design foundations.
- Details, details, details! If the animation takes you a second too long, you won’t have a good user experience. If the UI element does not have a fast response, the user may not perceive the next required interactivity. Pay attention to the details!
- Communication with developers must be constant, rich and present from the beginning to the end of the project. Use the various formats and types of meetings from the Atlassian PlayBook (more under point 3).
- Educate the client to properly enter content, photos, embedded or video material through CMS.
- Use Invision & framerJS to build a prototype.
3. Tense backend
AJAX calls to the database can clog even the strongest portals. Take WooCommerce as an example – one Add to cart action makes about 40 updates to the database. If you have multiple widgets, menus and content sections on one interface, each of them will request content from the database and load the entire backend.
- Explore the REST API backend with the helper plugin.
- Existing tools within Chrome developer tools are great for JS analysis.
- The Postman API tester is ideal for analyzing WP REST API calls.
- Create a Trade-Off workshop with a client and designers. It will allow you to eliminate unnecessary technical complications. Also, such a workshop is a chance for you to suggest technically better solutions, those that are “easier” on the backend and database.
- Sparing session is also a useful type of workshop where you can go through alternative loading solutions of the entire JS interface with the designer.
4. RESTful clients
Explain the advantages of the new modern web application in these fields:
- Involve the client (as soon as possible) in the website design project (work with them on the information architecture and content units). A standard kick-off meeting is crucial, but continuous collaboration will be the key to project success – Goals, signals and measures workshops help with such scenarios.
- Educate clients on content entry and how WP administration works. Immediately after the start of the project, get familiar with all the necessary actions for maintaining the JS WP application.
- Next to point 2… prototype often and early. Invision is a great tool in such scenarios where it is necessary for the client to leave realistic feedback on the desired solution.