WordCamp 2012 - WordPress Webapps

1,424 views
1,346 views

Published on

A presentation on WordPress webapps that was originally done at WordCamp LA in 2012.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,424
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

WordCamp 2012 - WordPress Webapps

  1. 1. WordCamp 2012WORDPRESS WEBAPPS Taylor Jasko | NetDNA/MaxCDN taylor@taylorjasko.com | @tjasko http://bit.ly/wordpress-app
  2. 2. ABOUT ME• Moved to L.A. nearly two months ago!• Age: 19 years young• Occupation: Online Marketing Specialist @ NetDNA• Swiss army knife of the web - HTML, CSS, JavaScript, SEO/SEM, PHP, Django, Perl, Ruby On Rails, Nginx, Apache, MySQL, Varnish, Memcached...• Hobbies: cycling, blogging, developing, designing, and StackExchange. @tjasko
  3. 3. WHAT IF I TOLD YOU...• You can make your site content download faster.• Make your website handle tons of traffic.• Have only two calls to your server per page load.• Make your users happy with nearly instant page loads. @tjasko
  4. 4. ENTER THEWORLD OFWEBAPPS @tjasko
  5. 5. WHAT ARE WEBAPPS?• The terminology is iffy.• Some examples of common webapps: Gmail, Facebook, Twitter, Dropbox, Google, and GitHub.• Most would say a webapp is like a desktop application.• So what’s the difference between a webapp and a non- webapp? @tjasko
  6. 6. STACKEXCHANGE SAYS...
  7. 7. WHAT MAKES UP A WEBAPP1 Compact (everything is a click away)2 Interactive user interface (a ‘native’ feeling)3 Using specific device features (geolocation, iOS’s viewport)4 Driven by the user (not the scroll wheel)5 Browser navigation not needed (back button is dead)6 Working offline (HTML5’s local storage) @tjasko
  8. 8. WHY WEBAPPS?• They’re outright awesome.• Users know how to navigate around them.• Another excuse to use the latest technologies.• Some of the fastest sites around. @tjasko
  9. 9. WORDPRESS & WEBAPPSIs WordPress really meant for this?
  10. 10. WHY ON WORDPRESS?• WordPress offers an extensive interface to edit content.• Friendly templating is built right in...• Over 21,194 plugins.• And lastly... custom fields! @tjasko
  11. 11. YES, IT’S POSSIBLE!
  12. 12. WHAT’S FOR ME?• Endless possibilities for a WordPress webapp. - Realtor Listings, Yellow Pages, Product Showcase, Blog Posts...• Better user interactions/conversions.• Easier to manage and edit.• Scale on ‘the cloud’... say buh bye to DDoSers.• Most content can be static and is CDN-ready. @tjasko
  13. 13. FANCY BUZZ WORDS? - CDN (Content Delivery Network):• Delivers your site’s static file• Files transfer through hundreds of servers• Redundant and scalable• Files are sent to the user from the closest server @tjasko
  14. 14. TYPICAL WORDPRESS THEME
  15. 15. TYPICAL WORDPRESS THEME
  16. 16. TYPICAL WORDPRESS THEME
  17. 17. TYPICAL WORDPRESS THEME
  18. 18. TYPICAL WORDPRESS THEME
  19. 19. TYPICAL WORDPRESS THEME
  20. 20. TYPICAL WORDPRESS THEME
  21. 21. TYPICAL WORDPRESS THEME
  22. 22. TYPICAL WORDPRESS THEME
  23. 23. TYPICAL WORDPRESS THEME
  24. 24. TYPICAL WORDPRESS THEME
  25. 25. TYPICAL WORDPRESS THEME
  26. 26. TYPICAL WORDPRESS THEME
  27. 27. TYPICAL WORDPRESS THEME
  28. 28. WEBAPP WORDPRESS THEME
  29. 29. WEBAPP WORDPRESS THEME
  30. 30. LET’S GET DIRTY...
  31. 31. LET’S GET DIRTY...
  32. 32. LET’S GET DIRTY...
  33. 33. LET’S GET DIRTY...
  34. 34. LET’S GET DIRTY...
  35. 35. LET’S GET DIRTY...
  36. 36. LET’S GET DIRTY...
  37. 37. LET’S GET DIRTY...
  38. 38. LET’S GET DIRTY...
  39. 39. WHAT’S WRONG?• Markup is duplicated (the styling of the site)• Repeated content (titles & links)• Slower to download• Can be fixed with JSON (Twitter, Facebook, & Google uses it) @tjasko
  40. 40. MAKE IT SIMPLE WITH JSONJavaScript Object Notation• No duplicate content• Very minimal• Tiny when compressed• Nothing to mess up
  41. 41. POST ID
  42. 42. GRAVATAR IMAGE
  43. 43. PERMALINK
  44. 44. SLUG
  45. 45. POST TILE
  46. 46. DATE POSTED
  47. 47. TAGS
  48. 48. POST CONTENT
  49. 49. AUTHOR INFO
  50. 50. HOW SMALL IS IT? @tjasko
  51. 51. HOW SMALL IS IT? @tjasko
  52. 52. HOW SMALL IS IT? @tjasko
  53. 53. THAT’S MORE THAN 3 TIMES SMALLER! @tjasko
  54. 54. BUT WHAT ABOUT STYLING? John Resig (creator of jQuery) created a mini JavaScript templating function.
  55. 55. JAVASCRIPTTEMPLATING• All styling is delivered by the web host, parsed by the user• Lessresources needed on your server• Faster for your users and on your server
  56. 56. JAVASCRIPT TEMPLATING
  57. 57. TEMPLATE NAME
  58. 58. POST ID
  59. 59. COMPUTATION
  60. 60. GET IMAGE LINKS
  61. 61. CREATE LINKS
  62. 62. BUT IT CAN BE FASTER A lot faster... nearly instant.• As this JSON content is static, it can be cached.• But what happens if I make an edit to the post?• You can use a simple “hashing” system. hashing system will use cache busting (based on• This query strings). @tjasko
  63. 63. CACHE BUSTING• A “random” string appended to the URL.• http://5tatic.com/api/?post=samplepost&key=xyz123• Thisvalue would be based on the last modified date of the post.• Let’s see how this would work... @tjasko
  64. 64. Will outputsomething like...d3ab37f396555224f4c5bf 59cac46ae4
  65. 65. WHAT ABOUT SEO Search Engine Optimization• Optimallythere will be two versions of a post. - One version Google can see. - One version users will see.• When a post is loaded, it does it for search engines and users.• On the homepage, Google can still crawl the site, even though it is entirely dynamic. @tjasko
  66. 66. SO, WHAT WERE THOSE TWO CALLS?• The first call to the server would be the main page.• The second call would be an AJAX request to the server, getting the hash various content types. - First page of posts - Any featured content• Everything else can be served by a CDN: - Images, CSS, JS, JSON, etc... @tjasko
  67. 67. ENTER WORDAPP http://GetWordApp.com• Fully open source• Incredibly fast• Easy to follow• Highly extendable @tjasko
  68. 68. ENTER WORDAPP Available on now!Check out GetWordApp.com for more details. @tjasko
  69. 69. ANY QUESTIONS? Ask away WordPressers!Check out GetWordApp.com for more details. taylor@taylorjasko.com | @tjasko

×