WordCamp 2012 - WordPress Webapps
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

WordCamp 2012 - WordPress Webapps

  • 1,615 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,615
On Slideshare
1,614
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 1

https://twitter.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WordCamp 2012WORDPRESS WEBAPPS Taylor Jasko | NetDNA/MaxCDN taylor@taylorjasko.com | @tjasko http://bit.ly/wordpress-app
  • 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. 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. ENTER THEWORLD OFWEBAPPS @tjasko
  • 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. STACKEXCHANGE SAYS...
  • 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. 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. WORDPRESS & WEBAPPSIs WordPress really meant for this?
  • 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. YES, IT’S POSSIBLE!
  • 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. 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. TYPICAL WORDPRESS THEME
  • 15. TYPICAL WORDPRESS THEME
  • 16. TYPICAL WORDPRESS THEME
  • 17. TYPICAL WORDPRESS THEME
  • 18. TYPICAL WORDPRESS THEME
  • 19. TYPICAL WORDPRESS THEME
  • 20. TYPICAL WORDPRESS THEME
  • 21. TYPICAL WORDPRESS THEME
  • 22. TYPICAL WORDPRESS THEME
  • 23. TYPICAL WORDPRESS THEME
  • 24. TYPICAL WORDPRESS THEME
  • 25. TYPICAL WORDPRESS THEME
  • 26. TYPICAL WORDPRESS THEME
  • 27. TYPICAL WORDPRESS THEME
  • 28. WEBAPP WORDPRESS THEME
  • 29. WEBAPP WORDPRESS THEME
  • 30. LET’S GET DIRTY...
  • 31. LET’S GET DIRTY...
  • 32. LET’S GET DIRTY...
  • 33. LET’S GET DIRTY...
  • 34. LET’S GET DIRTY...
  • 35. LET’S GET DIRTY...
  • 36. LET’S GET DIRTY...
  • 37. LET’S GET DIRTY...
  • 38. LET’S GET DIRTY...
  • 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. MAKE IT SIMPLE WITH JSONJavaScript Object Notation• No duplicate content• Very minimal• Tiny when compressed• Nothing to mess up
  • 41. POST ID
  • 42. GRAVATAR IMAGE
  • 43. PERMALINK
  • 44. SLUG
  • 45. POST TILE
  • 46. DATE POSTED
  • 47. TAGS
  • 48. POST CONTENT
  • 49. AUTHOR INFO
  • 50. HOW SMALL IS IT? @tjasko
  • 51. HOW SMALL IS IT? @tjasko
  • 52. HOW SMALL IS IT? @tjasko
  • 53. THAT’S MORE THAN 3 TIMES SMALLER! @tjasko
  • 54. BUT WHAT ABOUT STYLING? John Resig (creator of jQuery) created a mini JavaScript templating function.
  • 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. JAVASCRIPT TEMPLATING
  • 57. TEMPLATE NAME
  • 58. POST ID
  • 59. COMPUTATION
  • 60. GET IMAGE LINKS
  • 61. CREATE LINKS
  • 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. 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. Will outputsomething like...d3ab37f396555224f4c5bf 59cac46ae4
  • 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. 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. ENTER WORDAPP http://GetWordApp.com• Fully open source• Incredibly fast• Easy to follow• Highly extendable @tjasko
  • 68. ENTER WORDAPP Available on now!Check out GetWordApp.com for more details. @tjasko
  • 69. ANY QUESTIONS? Ask away WordPressers!Check out GetWordApp.com for more details. taylor@taylorjasko.com | @tjasko