Moving Beyond WordPress At Tech in Asia
Download as PPTX, PDF0 likes555 views
Tech in Asia, initially established as Penn Olson, transitioned from using WordPress as its primary platform to adopting a custom-built solution leveraging the WordPress REST API for better scalability and functionality. The shift included significant milestones such as the implementation of user-generated content and custom design updates, culminating in a service-oriented architecture with distinct APIs for different functions. Future plans involve integrating a modern editorial CMS and enhancing front-end user experience using React.
More Related Content
Similar to Moving Beyond WordPress At Tech in Asia (20)
Moving Beyond WordPress At Tech in Asia
- 1. Moving Beyond WordPress at Tech in Asia - Lester & Melvin T
- 2. Tech in Asia (YC W2015) is a media, events, and jobs platform for Asia’s tech communities. We are a team of 100 across 12 cities in the region spanning editorial, product, community and events functions. About Tech in Asia
- 3. History of WordPress at Tech in Asia ● Tech in Asia is 5 years old ● Back then Tech in Asia was known as Penn Olson ● Been on WordPress since the start ● Using a customized WordPress theme (not using any theme framework) ● Most features are custom coded plugins. Third-party plugins just doesn’t scale well and didn’t meet our requirements.
- 4. Walking Down Memory Lane 18th August 2014 Product Team Formed
- 5. Walking Down Memory Lane 27th October 2014 List View
- 6. Walking Down Memory Lane 17th October 2014 Trending Articles / Member System
- 7. Walking Down Memory Lane 20th April 2015 Added Facebook & Google Login
- 8. Walking Down Memory Lane 28th May 2015 User Generated Content / Upvoting Articles
- 9. Walking Down Memory Lane 17th August 2015 Whiter, Flatter, Sleeker Design
- 10. Walking Down Memory Lane 16th December 2015 Major Redesign Using WP API And React
- 11. Walking Down Memory Lane 31st May 2016 Jobs
- 12. WordPress as our Back-end WordPress as our Back-end
- 13. WordPress API ● WordPress REST API infrastructure was in WordPress core since WordPress 4.4 (8th December 2015) ● Prior to WordPress 4.4, we have been testing WordPress REST API Plugin (https://wordpress.org/plugins/rest-api/) in preparation for the release ● We are not using the default namespace provided by the plugin ○ Eg: /wp-json/wp/v2/posts ● We are using our own namespace with our own payload format ○ Eg: /wp-json/techinasia/2.0/posts
- 14. Namespace / Version / Payload Format ● Namespace /techinasia/ ○ Avoid conflicts ○ Our own identity ● Version /2.0/ ○ We used “2.0” instead of “v2” ■ Float for easy validation ● Payload ○ Only return what the client needs ○ Standardized payload format and pagination format ○ Eg: https://www.techinasia.com/wp-json/techinasia/2.0/posts
- 15. The Move To WordPress API ● Unified API ○ Same API for web, iOS and Android ● Service-Oriented Architecture (SOA) ○ Laravel used for Startups & Jobs database ○ WordPress used for Editorial & Community content ● Separation of concerns ○ FE engineers need not touch API and vice versa ● Hiring ○ Easier to hire a JS guy to implement an API then a WordPress engineer
- 16. Features ● Can’t use most of the WordPress plugins ○ Custom coded feature as a plugin ■ Comment upvoting, notification, registration, login ● 3rd party plugins mainly backend related ○ AMP, Google XML Sitemaps, Instant Articles, Redis Object Cache, TinyMCE Advanced
- 17. Services ● Impossible to built everything ourselves ● Search in WordPress is horrible ○ Google Custom Search ○ https://developers.google.com/custom-search/ ● Jetpack Notification is a closed service ○ Stream ○ https://getstream.io/ ● Jetpack Proton doesn’t work for our use-case ○ Kraken ○ https://kraken.io/
- 18. Authentication, Authorization and Session ● Deal with Authentication, Authorization and Session management ● Authentication / Authorization ○ WordPress ○ wp_signon() and user_can() function ● Session ○ Data stored in Redis ○ Overwrite WP session data with “determine_current_user” filter ○ Session information is set in cookie in the browser ○ Cookie sent along with API request (web) or via Authorization
- 19. Rate Limiting / Caching ● API is open, prone to abuse ● Rate limiting GET / PUT / POST requests ○ Discourage spamming ○ Return 429 Too Many Requests when that happens ● Caching ○ Most of our users are “logged out” which makes caching easy ○ Most GET requests should be cached ○ Even a 1-minute cache would help for a heavy traffic site like TIA
- 20. Future? ● Editorial CMS like Automattic’s Calypso ○ Bypass WP-Admin ○ Desktop app using React with Electron ○ Customized to our editor’s workflow ○ More APIs needed
- 21. React as our Front-end React as our Front-end
- 22. Choosing a front-end framework ● 2015 was an interesting year for front-end development. ○ React’s popularity exploded. ○ Angular 2 was being announced; not fully backward compatible with Angular 1. ○ ES2015 - the most significant upgrade to JavaScript was finalised in June.
- 23. React’s Virtual DOM Credits: http://calendar.perfplanet.com/2013/diff/
- 26. React Ops Stuff ● Babel (https://babeljs.io/) ○ Transpile JSX and ES2015+ code to ES5 ● webpack (http://webpack.github.io/) ○ Module bundler (with a lot of magic) ○ Code splitting ○ Hot reloading
- 27. Flux Architecture ● An architecture to manage data between different views ● Data travels in a unidirectional flow ● Many variants of Flux - Redux is currently the most popular Credits: https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207
- 28. Routing with React ● Routing separate from WordPress ● Using react-router (https://github.com/reactjs/react-router) ● How do we handle pretty permalinks? (https://www.techinasia.com/%postname%) ○ Custom WP REST API that takes in the slug ○ Call the API that returns the post object ○ Get post type from the object ○ Render the correct component accordingly (page / post)
- 29. Search Engine Optimization ● SPA + SEO don’t really go well together ○ Not all search engines can “understand” JavaScript ● One trick: take a “screenshot” of the page ○ Service: Prerender.io (https://prerender.io/) ● Dynamically adding meta tags into the document: ○ react-helmet (https://github.com/nfl/react-helmet)
- 30. Tips on Starting out React ● Cover the basics without the ops part: https://facebook.github.io/react/docs/getting-started.html ● Start with a good boilerplate (react-boilerplate) ● Learn JavaScript (ES2015+) ○ Challenge: Functional Programming with JS Free book: https://leanpub.com/javascriptallongesix ● Redux: https://egghead.io/courses/getting-started-with-redux