6 ms·

How LinkedIn built its new iPad app

131 points by nikunjk 15y ago

Cloven 15y ago
"Today, however, Prasad no longer feels the need for the security blanket. “In the tablet version of the server, we’re still using Node, but now the clients are talking directly from the load balancers to Node, there’s no nginx.”" I thought the headline was just another SEO attention grab, but it's actually factually correct; there's no response to this sort of thing other than bemused incredulity.
- mcmire 15y ago
  I noticed that too. Sounds kinda weird and also kind of risky to me, but hey, whatever.
tbeseda 15y ago
Unfortunately, a lot of this reads as "Node.js IN the mobile app", not "Node.js backing the mobile app". It'd be better framed as a triumph for well composed and efficient Javascript in a web view. (In fact, Javascript isn't even mentioned once.) Perhaps, it's just not a publication I should be reading. The takeaway should be as Prasad was quoted, "As long as we can make the experience fast enough, nobody can tell the difference. It still feels right." [ Fully expecting my next client to ask for Node.js in their iPhone app because "LinkedIn did it." ]
zerostar07 15y ago
What's with that Node.js part? Even if it is part of the backend it has nothing to do with the app, so i 'll go ahead and guess either the writer is clueless, or they spit out random trendy jargon in their articles.
- dpritchett 15y ago
  The writer recently went back to school to get an AS focused on OOP/Java: http://www.linkedin.com/in/jolieodell http://www.linkedin.com/in/jolieodell
- eldude 15y ago
  The seemingly irrelevant emphasis on node.js is consistent with commitment to "web technologies" (JavaScript).
- wavephorm 15y ago
  I don't think the author has any idea what anything in that article even means.
  - mcantelon 15y ago
    She's been covering Node for a year or so and even judged a Node Knockout competition. http://mashable.com/2011/03/10/node-js/ http://mashable.com/2011/03/10/node-js/ http://venturebeat.com/2012/01/30/dahl-out-mike-drop/ http://venturebeat.com/2012/01/30/dahl-out-mike-drop/ http://nodeknockout.com/judges http://nodeknockout.com/judges Here's an interview she did last year with a Node dev in which she referenced LinkedIn's work with Node for their mobile site. http://venturebeat.com/2011/12/09/node-js-rackspace/ http://venturebeat.com/2011/12/09/node-js-rackspace/
- pedalpete 15y ago
  I agree that the author has no idea about client vs. server, but reporters aren't technical, it goes with the territory. I think Prasad lead the discussion to node.js (the author journo wouldn't know to ask) so that they could talk about open sourcing tools, etc. It was a chance to get a message out. Is it possible also that node.js is providing faster response times on the same number of servers?
K2h 15y ago
How do you calculated 95% of the app is remote? I am hard pressed to come up with an equation to even start with. local code size vs total code size required to run (where the remainder comes from HTML5 download?)
- dpritchett 15y ago
  Probably node/Backbone JS KLOC vs. iOS Obj-C KLOC.
- rickmode 15y ago
  Sounds like it was calculated by page count: "Yes, only one screen in the entire LinkedIn iPad app is actually native."
paperwork 15y ago
Not being an ios dev, I didn't understand the tech they actually are using. Is the article saying that the linked in app is basically some sort of web container (webkit?) and everything on the screen is actually html/javascript being interpreted by the web container? Didn't google put out a "gmail app" recently, which was basically a web container with all content in html? I remember there being a backlash because it wasn't a true native app. Did that app have a different problem? Is it feasible to create nice, usable iphone/ipad apps using mostly html/js (but have them look like native apps)/
- sosuke 15y ago
  Go to slide two and you will see a massive amount of text content. Those instances are perfect examples of when a UIWebView is a perfect vehicle for organizing information that HTML and CSS do best. Several apps like this one do similar stuff when presented with marking up text blocks.
- alaskamiller 15y ago
  Apple's App Store app is mostly HTML too. This is a trend piece pointing out how web techonlogies is seeing more real world uses by big name corporations, though not a particularly new trend.
  - potatolicious 15y ago
    The App Store app is also aggravatingly slow, just like every other heavily-webview'ed app (Facebook, and now LinkedIn I guess). Note that desktop apps that try to do this fare little better - iTunes is widely hated by its own users for being bloated and slow, particularly the store component, which is entirely webviews. In the mobile space right now, these webview'ed apps seem to be heavily sacrificing user experience for developer experience, which is something I cannot agree with.
    - marknutter 15y ago
      you've just described every website, ever, yet they have managed to become quite popular despite the superior performance of native applications.
sosuke 15y ago
So they used HTML5/JavaScript in a UIWebView with Node.js on the backend? Pretty sweet, I was just remarking to a co-worker how much I enjoyed the Updates section.
- SpiderX 15y ago
  Their engineering blog is chocked full of information on how they built and improved upon their site. It is an interesting read.
  - tantalor 15y ago
    For example, http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-10-performance-tips-linkedin-mobile http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-1...
deleted 15y ago
[deleted]
lucian1900 15y ago
I don't get what's so unbelievable, this is exactly what I'd have expected. At least Ars Technica have done this before, Facebook too. Using node on the server side is irrelevant.
fpp 15y ago
This is basically a HTML5 app with a native wrapper for all the things you need access rights to - security, storage, comm etc... From their dev. site (http://engineering.linkedin.com/mobile/linkedin-ipad-using-local-storage-snappy-mobile-apps http://engineering.linkedin.com/mobile/linkedin-ipad-using-l...) "...LinkedIn just released a brand new iPad app built using HTML5, backbone.js, and underscore.js. The app includes a rich stream of information which is a combination of network updates, group posts and news articles..." Also interesting their code to create what they call a "container view controller" is available under Apache at https://github.com/linkedin/LIExposeController https://github.com/linkedin/LIExposeController Guess you can / you do build something similar when you create an app with PhoneGap.
- rogerbinns 15y ago
  Their method is also how I have built most of my Android apps. You use a WebView for the user interface and then use the addJavascriptInterface[1] method to allow calls from the Javascript code back through to chosen methods in the Java code. You also need to use Java when you want native settings menu and system search functionality. Making calls from Java back into the Javascript is a bit more painful since you don't get a response back directly, but is sufficiently useful to dispatch events. You can bundle your javascript, images, html etc in the app assets so it will still work even if there is no networking. Depending on the app network requirements it is also likely you'll want to do the networking from Java so it can manage threads, connectivity, saving resumable state in SQLite databases. This approach is fairly easy to develop and test (you can do a lot of it in a desktop environment). The drawbacks are that elements of your UI may not appear "native" and that some events are a pain from Javascript, especially dealing with swipes. I must admit I thought a lot of mobile apps were developed this way, and hence this article being a non-story. [1] http://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object http://developer.android.com/reference/android/webkit/WebVie..., java.lang.String)
  - gurkendoktor 15y ago
    > The drawbacks are that elements of your UI may not appear "native" and that some events are a pain from Javascript, especially dealing with swipes. Another drawback on iOS is that it can be hard to limit the memory that your UIWebView consumes, and it will crash the whole app if it needs to much.
deleted 15y ago
[deleted]
waratuman 15y ago
Nope, nope, I can totally believe it.
dguido 15y ago
Nope, I believe it. I bet they also didn't use SSL at all, just like they didn't in the iPhone app.
mrchess 15y ago
Anyone know the technology used for the client? Sencha? Perhaps another library?
- tylerlh 15y ago
  Pretty sure it was backbone and underscore. LinkedIn likes them pretty well.
  - mrchess 15y ago
    I'm curious if they integrated Sencha touch with it too. Personally I use Backbone to layout structure, but still integrate it with Ext for specific components.
    - karlshea 15y ago
      I poked around in their iPhone app source while I was learning Backbone and didn't see any Sencha classes.
jashkenas 15y ago
By lucky coincidence, I just updated the LinkedIn Mobile example on backbonejs.org this morning, with the new iPad app: http://backbonejs.org/#examples-linkedin http://backbonejs.org/#examples-linkedin
neovive 15y ago
Does anyone know if LI used any specific Node modules? I'm evaluating Node.js for a project and am trying to get a handle on the thousands of modules available in npm.
- tlack 15y ago
  They mention using SASS, Express, Step for async coordination, underscore.js, and some others. http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-10-performance-tips-linkedin-mobile http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-1... They also have a Github fork of the excellent Dust template engine, so I presume they use that as well.
marcusf 15y ago
I don't believe what he's saying about responsive design at the bottom of the article, and certainly the motivation about context and device seems trite. It's entirely unobvious to me that my intent is correlated with my device. Often as not, I slouch around on the couch or on a long trip with my iphone because I'm either too lazy or unable to use my laptop. The article might make him a disservice though; I'd like to hear him elaborate in his own words about it.
- andycroll 15y ago
  No-one is advocating 'responsive design for apps' so I'm not exactly sure what he's talking about. It is true that a responsive design for the LinkedIn website might be a tricky-ish project given the current (surprising?) complexity of the 'main' site.
deleted 15y ago
[deleted]
HardyLeung 15y ago
A nitpick on the title, cuz it annoys me. Why would anyone say "You'll never believe X"? The X in question (95% HTML) is actually not that unusual to begin with. But even if X is mind-blowing, the fact is that the article was written to show readers this mind-blowing fact. And after reading said article, should I still be in the "never believe" camp, making it an unconvincing article? Or should I now believe it, thereby invalidating the premise that X is something "I'll never believe"? I know. Exaggeration sells. But still.
- grogs 15y ago
  Argh, sensationalism is very annoying. As a web dev who's used PhoneGap, and I'm glad to see it's becoming an accepted approach to mobile apps... But PhoneGap has been around for years. Regarding responsive design: the best mobile apps/sites will have a specially crafted mobile design, but responsive design is a good solution if you lack the resources/need for a great mobile app.
ricksta 15y ago
Maybe I'm picky, but in my iPad the side to side animation is still jerky.
- gurkendoktor 15y ago
  Same here on iPad 1. And the scrolling "bounce" feels odd too in some views.
lninyo 15y ago
I don't know about iPad app, but the iphone app is TOTAL SHITE! I have NEVER been able to click on a link in my email and get to the mobile site successfully. It crashes every single time and I just stopped using the damn thing.
st3fan 15y ago
I'm just going to say it: i don't like it that much. Don't get me wrong it looks nice and it is a functional app but I instantly feel this is not a native app. The interactions are wrong. The scroll bounce is not correct. There are noticable delays. The back button does a fade instead of popping a viewcontroller. Little things like that.
vco 15y ago
Let's not forget that building a quality HTML 5 interface takes as much effort as building a quality native interface - and you have to specifically build it for a specific platform. I suppose the biggest advantage is that there's a lot more common code that can be shared between platforms which potentially could cut down development time for developing for multiple platforms.

131 points by nikunjk 15y ago

"Today, however, Prasad no longer feels the need for the security blanket. “In the tablet version of the server, we’re still using Node, but now the clients are talking directly from the load balancers to Node, there’s no nginx.”" I thought the headline was just another SEO attention grab, but it's actually factually correct; there's no response to this sort of thing other than bemused incredulity.

mcmire 15y ago
I noticed that too. Sounds kinda weird and also kind of risky to me, but hey, whatever.

tbeseda 15y ago

Unfortunately, a lot of this reads as "Node.js IN the mobile app", not "Node.js backing the mobile app". It'd be better framed as a triumph for well composed and efficient Javascript in a web view. (In fact, Javascript isn't even mentioned once.) Perhaps, it's just not a publication I should be reading. The takeaway should be as Prasad was quoted, "As long as we can make the experience fast enough, nobody can tell the difference. It still feels right." [ Fully expecting my next client to ask for Node.js in their iPhone app because "LinkedIn did it." ]

zerostar07 15y ago

What's with that Node.js part? Even if it is part of the backend it has nothing to do with the app, so i 'll go ahead and guess either the writer is clueless, or they spit out random trendy jargon in their articles.

dpritchett 15y ago
The writer recently went back to school to get an AS focused on OOP/Java: http://www.linkedin.com/in/jolieodell http://www.linkedin.com/in/jolieodell
eldude 15y ago
The seemingly irrelevant emphasis on node.js is consistent with commitment to "web technologies" (JavaScript).
wavephorm 15y ago
I don't think the author has any idea what anything in that article even means.
- mcantelon 15y ago
  She's been covering Node for a year or so and even judged a Node Knockout competition. http://mashable.com/2011/03/10/node-js/ http://mashable.com/2011/03/10/node-js/ http://venturebeat.com/2012/01/30/dahl-out-mike-drop/ http://venturebeat.com/2012/01/30/dahl-out-mike-drop/ http://nodeknockout.com/judges http://nodeknockout.com/judges Here's an interview she did last year with a Node dev in which she referenced LinkedIn's work with Node for their mobile site. http://venturebeat.com/2011/12/09/node-js-rackspace/ http://venturebeat.com/2011/12/09/node-js-rackspace/
pedalpete 15y ago
I agree that the author has no idea about client vs. server, but reporters aren't technical, it goes with the territory. I think Prasad lead the discussion to node.js (the author journo wouldn't know to ask) so that they could talk about open sourcing tools, etc. It was a chance to get a message out. Is it possible also that node.js is providing faster response times on the same number of servers?

K2h 15y ago

How do you calculated 95% of the app is remote? I am hard pressed to come up with an equation to even start with. local code size vs total code size required to run (where the remainder comes from HTML5 download?)

dpritchett 15y ago
Probably node/Backbone JS KLOC vs. iOS Obj-C KLOC.
rickmode 15y ago
Sounds like it was calculated by page count: "Yes, only one screen in the entire LinkedIn iPad app is actually native."

paperwork 15y ago

Not being an ios dev, I didn't understand the tech they actually are using. Is the article saying that the linked in app is basically some sort of web container (webkit?) and everything on the screen is actually html/javascript being interpreted by the web container? Didn't google put out a "gmail app" recently, which was basically a web container with all content in html? I remember there being a backlash because it wasn't a true native app. Did that app have a different problem? Is it feasible to create nice, usable iphone/ipad apps using mostly html/js (but have them look like native apps)/

sosuke 15y ago
Go to slide two and you will see a massive amount of text content. Those instances are perfect examples of when a UIWebView is a perfect vehicle for organizing information that HTML and CSS do best. Several apps like this one do similar stuff when presented with marking up text blocks.
alaskamiller 15y ago
Apple's App Store app is mostly HTML too. This is a trend piece pointing out how web techonlogies is seeing more real world uses by big name corporations, though not a particularly new trend.
- potatolicious 15y ago
  The App Store app is also aggravatingly slow, just like every other heavily-webview'ed app (Facebook, and now LinkedIn I guess). Note that desktop apps that try to do this fare little better - iTunes is widely hated by its own users for being bloated and slow, particularly the store component, which is entirely webviews. In the mobile space right now, these webview'ed apps seem to be heavily sacrificing user experience for developer experience, which is something I cannot agree with.
  - marknutter 15y ago
    you've just described every website, ever, yet they have managed to become quite popular despite the superior performance of native applications.

sosuke 15y ago

So they used HTML5/JavaScript in a UIWebView with Node.js on the backend? Pretty sweet, I was just remarking to a co-worker how much I enjoyed the Updates section.

SpiderX 15y ago
Their engineering blog is chocked full of information on how they built and improved upon their site. It is an interesting read.
- tantalor 15y ago
  For example, http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-10-performance-tips-linkedin-mobile http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-1...

deleted 15y ago

[deleted]

lucian1900 15y ago

I don't get what's so unbelievable, this is exactly what I'd have expected. At least Ars Technica have done this before, Facebook too. Using node on the server side is irrelevant.

fpp 15y ago

This is basically a HTML5 app with a native wrapper for all the things you need access rights to - security, storage, comm etc... From their dev. site (http://engineering.linkedin.com/mobile/linkedin-ipad-using-local-storage-snappy-mobile-apps http://engineering.linkedin.com/mobile/linkedin-ipad-using-l...) "...LinkedIn just released a brand new iPad app built using HTML5, backbone.js, and underscore.js. The app includes a rich stream of information which is a combination of network updates, group posts and news articles..." Also interesting their code to create what they call a "container view controller" is available under Apache at https://github.com/linkedin/LIExposeController https://github.com/linkedin/LIExposeController Guess you can / you do build something similar when you create an app with PhoneGap.

rogerbinns 15y ago
Their method is also how I have built most of my Android apps. You use a WebView for the user interface and then use the addJavascriptInterface[1] method to allow calls from the Javascript code back through to chosen methods in the Java code. You also need to use Java when you want native settings menu and system search functionality. Making calls from Java back into the Javascript is a bit more painful since you don't get a response back directly, but is sufficiently useful to dispatch events. You can bundle your javascript, images, html etc in the app assets so it will still work even if there is no networking. Depending on the app network requirements it is also likely you'll want to do the networking from Java so it can manage threads, connectivity, saving resumable state in SQLite databases. This approach is fairly easy to develop and test (you can do a lot of it in a desktop environment). The drawbacks are that elements of your UI may not appear "native" and that some events are a pain from Javascript, especially dealing with swipes. I must admit I thought a lot of mobile apps were developed this way, and hence this article being a non-story. [1] http://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object http://developer.android.com/reference/android/webkit/WebVie..., java.lang.String)
- gurkendoktor 15y ago
  > The drawbacks are that elements of your UI may not appear "native" and that some events are a pain from Javascript, especially dealing with swipes. Another drawback on iOS is that it can be hard to limit the memory that your UIWebView consumes, and it will crash the whole app if it needs to much.

deleted 15y ago

[deleted]

waratuman 15y ago

Nope, nope, I can totally believe it.

dguido 15y ago

Nope, I believe it. I bet they also didn't use SSL at all, just like they didn't in the iPhone app.

mrchess 15y ago

Anyone know the technology used for the client? Sencha? Perhaps another library?

tylerlh 15y ago
Pretty sure it was backbone and underscore. LinkedIn likes them pretty well.
- mrchess 15y ago
  I'm curious if they integrated Sencha touch with it too. Personally I use Backbone to layout structure, but still integrate it with Ext for specific components.
  - karlshea 15y ago
    I poked around in their iPhone app source while I was learning Backbone and didn't see any Sencha classes.

jashkenas 15y ago

By lucky coincidence, I just updated the LinkedIn Mobile example on backbonejs.org this morning, with the new iPad app: http://backbonejs.org/#examples-linkedin http://backbonejs.org/#examples-linkedin

neovive 15y ago

Does anyone know if LI used any specific Node modules? I'm evaluating Node.js for a project and am trying to get a handle on the thousands of modules available in npm.

tlack 15y ago
They mention using SASS, Express, Step for async coordination, underscore.js, and some others. http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-10-performance-tips-linkedin-mobile http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-1... They also have a Github fork of the excellent Dust template engine, so I presume they use that as well.

marcusf 15y ago

I don't believe what he's saying about responsive design at the bottom of the article, and certainly the motivation about context and device seems trite. It's entirely unobvious to me that my intent is correlated with my device. Often as not, I slouch around on the couch or on a long trip with my iphone because I'm either too lazy or unable to use my laptop. The article might make him a disservice though; I'd like to hear him elaborate in his own words about it.

andycroll 15y ago
No-one is advocating 'responsive design for apps' so I'm not exactly sure what he's talking about. It is true that a responsive design for the LinkedIn website might be a tricky-ish project given the current (surprising?) complexity of the 'main' site.

deleted 15y ago

[deleted]

HardyLeung 15y ago

A nitpick on the title, cuz it annoys me. Why would anyone say "You'll never believe X"? The X in question (95% HTML) is actually not that unusual to begin with. But even if X is mind-blowing, the fact is that the article was written to show readers this mind-blowing fact. And after reading said article, should I still be in the "never believe" camp, making it an unconvincing article? Or should I now believe it, thereby invalidating the premise that X is something "I'll never believe"? I know. Exaggeration sells. But still.

grogs 15y ago
Argh, sensationalism is very annoying. As a web dev who's used PhoneGap, and I'm glad to see it's becoming an accepted approach to mobile apps... But PhoneGap has been around for years. Regarding responsive design: the best mobile apps/sites will have a specially crafted mobile design, but responsive design is a good solution if you lack the resources/need for a great mobile app.

ricksta 15y ago

Maybe I'm picky, but in my iPad the side to side animation is still jerky.

gurkendoktor 15y ago
Same here on iPad 1. And the scrolling "bounce" feels odd too in some views.

lninyo 15y ago

I don't know about iPad app, but the iphone app is TOTAL SHITE! I have NEVER been able to click on a link in my email and get to the mobile site successfully. It crashes every single time and I just stopped using the damn thing.

st3fan 15y ago

I'm just going to say it: i don't like it that much. Don't get me wrong it looks nice and it is a functional app but I instantly feel this is not a native app. The interactions are wrong. The scroll bounce is not correct. There are noticable delays. The back button does a fade instead of popping a viewcontroller. Little things like that.

vco 15y ago

Let's not forget that building a quality HTML 5 interface takes as much effort as building a quality native interface - and you have to specifically build it for a specific platform. I suppose the biggest advantage is that there's a lot more common code that can be shared between platforms which potentially could cut down development time for developing for multiple platforms.