Client side rendering the good kind of outsourcing
Download as PPT, PDF
0 likes729 views
The document discusses the differences between client-side rendering and server-side rendering, with client-side rendering offloading rendering of markup to the client browser instead of the server, allowing for faster loading speeds and more dynamic content manipulation, though server-side rendering provides more security; it provides examples of companies that use client-side rendering and discusses factors to consider when deciding which approach is best for a given project.
![Server Side, contd
<div id=greeting>
accountID name Hello <?=$info[name]?>,
1 Joe how are you?
</div>
Hello Joe, how are you?](https://image.slidesharecdn.com/clientsiderendering-thegoodkindofoutsourcing-120730221125-phpapp01/85/Client-side-rendering-the-good-kind-of-outsourcing-3-320.jpg)
![username tweet
@Gsmitherman Check out what @RobFord did!
@myFeedSeed Were in Montreal for Intl
Startup Fest!
@McDonalds Dollar drink days are still
on!
@Starbucks Hey Ireland, tell us about
England
GET tweets
tweets: [
{username: @Gsmitherman, tweet: },
{username: @myFeedSeed, tweet: },
{username: @McDonalds, tweet: },
{username: @Starbucks, tweet: }
]](https://image.slidesharecdn.com/clientsiderendering-thegoodkindofoutsourcing-120730221125-phpapp01/85/Client-side-rendering-the-good-kind-of-outsourcing-6-320.jpg)
![and now on the client side:
tweets: [
{username: @Gsmitherman, tweet: },
{username: @myFeedSeed, tweet: },
{username: @McDonalds, tweet: },
{username: @Starbucks, tweet: }
]
function renderTweets(tweetData) {
// . . .
}](https://image.slidesharecdn.com/clientsiderendering-thegoodkindofoutsourcing-120730221125-phpapp01/85/Client-side-rendering-the-good-kind-of-outsourcing-7-320.jpg)
Client side rendering the good kind of outsourcing
- 1. Julian Lam Web Application Developer at FeedSeed Inc. Toronto, Ontario CLIENT SIDE RENDERING The Good Kind of Outsourcing!
- 2. What is Server Side Rendering? Server Side Content that is rendered by the web server e.g. PHP querying the contents of a database, and generating markup The traditional method of dynamically generating content
- 3. Server Side, contd <div id=greeting> accountID name Hello <?=$info[name]?>, 1 Joe how are you? </div> Hello Joe, how are you?
- 4. What is Client Side Rendering? Client Side Offloads the rendering of markup to the client Server is only responsible for parsing the incoming request and returning relevant data NOT the traditional way of developing websites/web applications!
- 5. Client Side Rendering, e.g. Here is our server-side data (in a traditional RDBMS setup) username tweet @Gsmitherman Check out what @RobFord did! @myFeedSeed Were in Montreal for Intl Startup Fest! @McDonalds Dollar drink days are still on! @Starbucks Hey Ireland, tell us about England
- 6. username tweet @Gsmitherman Check out what @RobFord did! @myFeedSeed Were in Montreal for Intl Startup Fest! @McDonalds Dollar drink days are still on! @Starbucks Hey Ireland, tell us about England GET tweets tweets: [ {username: @Gsmitherman, tweet: }, {username: @myFeedSeed, tweet: }, {username: @McDonalds, tweet: }, {username: @Starbucks, tweet: } ]
- 7. and now on the client side: tweets: [ {username: @Gsmitherman, tweet: }, {username: @myFeedSeed, tweet: }, {username: @McDonalds, tweet: }, {username: @Starbucks, tweet: } ] function renderTweets(tweetData) { // . . . }
- 8. username tweet @Gsmitherman Check out what @RobFord did! @myFeedSeed Were in Montreal for Intl Startup Fest! @McDonalds Dollar drink days are still on! @Starbucks Hey Ireland, tell us about England
- 9. Who uses it? Google (Images, infinite scrolling) Facebook (timeline, infinite scrolling) Twitter
- 10. Why Server Side? Easy to demonstrate in tutorials (stick to one language) Safe & Secure, all source data is kept well hidden from the user until view generation
- 11. Why Server Side, contd Javascript is not a guarantee A Yahoo! Engineer reported that 1.3% of their visitors did not have javascript enabled Old habits die hard Were indoctrinated into doing it this way
- 12. Why Client Side? Speed Rendering of content is offloaded to the user Bonus: JSON happens to be a fairly good container due to minimal markup Speed (Transfer Time) Only raw data vs. all data and all markup
- 13. Why Client Side, contd Convenience If some rendering took place on the server, and updates to that same content took place in the client, there is twice the code for zero gain Solution: Do it all client-side
- 14. Why Client Side, contd Extensibility Leverage the power of the browser beyond that of a viewport Server side render once, content set in stone Client side render as many time as you like Content can be manipulated, appended to, passed into graphing libs, etc
- 15. Which method is right for me? Depends entirely on what the data is, and the context that it is used in Client Side Applications displaying data verbatim from a database Server Side Applications containing calculated values derived from sensitive data
- 16. Aside: Never trust the client- side! It bears repeating that you can never trust anything that comes from the userland We dont want another GitHub/Ruby mass assignment vulnerability! Want to learn more? See me after!
- 17. Q&A
- 18. More details Shoot me an email: julian@feedseed.com Skype: julian.lam or come see me after the presentation