ReactJS with WordPress Headless Approach
- 1. React JS with WordPress Presented by JP Wallhorn | Founder & CEO @Syntx A game changer for SEO & Data Intelligence
- 3. Content 1. About Syntx and myself 2. Problems and Challenges with WordPress 3. Traditional vs Headless and how does it work 4. What is React 5. Benefits 6. The different solutions 7. How can Syntx help 8. Questions
- 4. About Us
- 5. 1. About Syntx & JP - JP Wallhorn (Geek and Entrepreneur) - Founded 03/2018 - Software Consulting Company for - Web - UX/UI - Mobile - Salesforce CRM - Award Winning - Local Resources - Focused on process, product and people - Growth 300% YOY
- 6. Trusted By
- 8. Problems and Challenges with WordPress
- 9. More than just a website - Content now a days is versatile - It’s not just pages and blog articles - Flexibility and integrations are key for a successful web presence or web application - Being tied to a single template and technology is so 2000 - Siri, Amazon Alexa integrations are coming quickly - Integrating native mobile applications or PWAs as they becoming more important by the day
- 10. Speed and SEO - WordPress templates tend to SLOW - A slow page speed drags down your SEO performance dramatically - WP delivers entire pages at once and doesn’t just show the most important content - More time and resources needed to optimize for mobile
- 11. Requires specific skill set - WordPress requires yet its own skill set - Separate teams that work on different technologies - Extra costs and overhead - Limited to a specific range of engineers
- 12. Traditional vs Headless How does it work?
- 14. Old - Traditional - Everything lives within one environment - Backend and FrontEnd are one ecosystem - You can’t scale both separately - You can’t integrate the content into other applications - You are limited to the provided technology (i.e. stuck with WordPress / PHP)
- 16. New - Headless - Separation of Backend and FrontEnd - Choice of FrontEnd technology - Added API layer that allows integration into the ecosystem - Separation of scalability and dependencies - More flexibility for integrations - Utilize pre-built integrations from a wider range of options
- 17. What is React?
- 18. Tip: The Solution - Hybrid Solution that works on Desktop, Mobile & Web - Library developed Facebook (Open Source) - #1 requested skill set for web development - Component based architecture - Rapid development - Maximum Flexibility - Pixel-perfect implementations - Blazing fast
- 19. Benefits
- 20. Speed -> SEO -> Organic Traffic The domino effect 1. Improved speed results in 2. Improved rankings which result in 3. More organic traffic
- 21. Benefits - Resources: Get access to a wider range of engineers - Quality: Leverage a technology that allows for pixel-perfect implementations - Rapid Development: Quickly iterate and deploy design changes without worrying about the overhead - Money Aspect: Leverage one team for various product solutions (desktop, web, mobile) - Omni-presence - Target your users on their favorite platform
- 22. Other Benefits - Security: Don’t be that company that leaks user information | Protect sensitive information - Scalability: By separating the dependencies you can scale independently and quickly - Flexibility: Easily integrate with other products and expand your backend logic
- 24. There is more than 1? - React is just the core - There are many projects around React that focus on specific things - React JS by default can not be crawled by Google correctly - Next JS is an SEO focused solution - Gatsby is an alternative (not covered here / own ecosystem)
- 25. What is NextJS - A lightweight library for static and server-rendered applications - Features built for speed: - Server Rendered by default - Automated Code Splitting - Lazy Loading - Out of the box solution - Zero configuration approach - Trusted by Netflix, Marvel, Invision, Uber, Audible, HULU
- 26. That’s where we come in - Syntx
- 27. How Syntx can help - Syntx has been doing these migrations various times - We have developed a proprietary WordPress API Integration - It’s built for flexibility - Friendly URLs and customized menus - Custom data structure right within WordPress - Don’t be stuck with Pages and Posts - Leverage custom fields and build out templates - Built-in caching
- 28. How Syntx can help - Automatically optimized and compress images - Content Delivery Network - Support for SVGs - Easily integrate with Salesforce, Pardot and other 3rd parties - Track custom user events - Implement A/B testing within minutes - Extended User Management - Native Mobile Experience
- 29. Questions?
- 30. GIVEAWAY Enter to win a major boost! 1X $10,000 off your next $20k+ project 2X $5,000 off your next $10k+ project Syntx.io/giveaway
- 31. THANK YOU
Editor's Notes
- #10: Users on mobile devices spend 90% of their time in apps vs the browser