Interesting tidbit: it's taken us months to get approved for the App Store b/c we were a bit stubborn in our refusal to offer an audio-only version of Sal's videos to people w/ crappy cell connections.
Since his stuff is so low-bitrate, we thought we could get all videos down to the lowest of Apple's HTTP Live Streaming requirements -- even having the crappiest of crappy video is 1000x better than audio only when trying to learn algebra.
We were able to make a <64kbps version for most of the videos, but couldn't do it for everything. Some were just over the mark. We hoped for a little app store leniency given the content.
Eventually we had to give up on some problematic videos and offer audio-only versions for crappy streaming connections. Gotta ship.
Do you guys have some sort of analytics system in place to determine how many users are actually accessing the audio-only versions? It sounds like you'll get these for free through Google Analytics on the website due to use of a UIWebView.
I'm honestly not sure how to detect which version of Apple's adaptive live streaming protocol thingamabob is being received. It's probably possible, but no, we don't have it at the moment.
Sal? Or Khan Rep? I'm just about to dive into the app but I want to know up front whether you guys have taken the online practice system and remade it for the iPad . Apple showed off stupid iBooks interactivity, like sliding to help yourself learn the stages of mitosis..., they don't get it. But if someone is leading the way, it's khan academy.
Have they actually stated that they are going to implement the exercises in iOS? The videos are great but the exercises are my favorite part. If they implement the exercises in iOS I might finally have to get myself an iPad.
This app seems to be a blend of native UIKit development and jQuery Mobile. The navigation on the left-hand side is native and really fluid, but on the right-hand side (where the videos and subtitles are) is a UIWebView with jQuery-Mobile-powered pages. That's why the scrolling performance of the subtitles is so shitty (compared to native scrolling) and why the "share" and "download" buttons don't really look native. But an average user wouldn't notice these things, so I guess they're not important.
I just don't understand why the developers didn't do everything natively. What are the advantages of using - in my mind - inferior technology like jQuery Mobile in an app that's completely custom-built anyway? It can't be that much more work to do the whole interface with UIKit.
Other than that I think it's a really good app (and great content, too). So, congratulations to the developers and Sal!
Hi—I'm Adam Ernst, the iOS-side developer of the Khan app.
Your assessment of the app's hybrid nature, and the performance problems that result, is correct. We know that the performance is subpar, and it wouldn't have been much more work for me to do the rest in native code.
Khan Academy recently hired John Resig, with whom I had the pleasure of working on this app. John is the inventor of jQuery and a core developer on jQuery Mobile. He's amazingly talented and has really pushed the Javascript world ahead.
It's no surprise that John is eager to improve jQuery Mobile, and his work at Khan Academy is a great real-world project on which to use it. John tackled the jQuery Mobile side of the project, and I filled in native code for the parts (like the navigation) that would have been far too slow in Javascript.
I'm sure John will continue optimizing jQuery Mobile to improve its performance. So just stay tuned; the jQuery Mobile project has been moving incredibly fast. And thanks, John, for the opportunity to work with you!
> It can't be that much more work to do the whole interface with UIKit.
It really does take that much more time.
Just to use a simple example of displaying a list of data. An experienced web developer can take a list of data from a database or web service, loop through it, and spit out a decent looking page in 10-15 minutes. Maybe take an 15-30 minutes of tweaking and styling to make it really look professional.
Now, doing the same thing on iOS, you use what is called a UITableView. There is no type of magic data binding included, so you have to wire the whole thing up by hand. A bit more extra work but nothing too terrible so far. Now, tableviews are great if you only need to display text in one of 4 predefined ways, but that usually ends up not being the case. You end up having to make your own UITableCells to get things laid out just the way you want. So you make a cell and start loading it up with different label fields, one for each differently styled piece of text you want, image controls, etc etc. Now, if you are doing this the 'right' way, each of these cells should have their own controller because by now the method that is providing the cells to the UITableView has a ton of logic in it and is acting as the controller for your custom cell. But, you have to maintain this list of controllers seperately inside your UITableViewController, further down the rabbit hole you go.
You think you are all done, but depending on how fancy your cells are and how long your list is, you notice the scrolling is jerky, not smooth, not very 'iPhoneish'. So you read some more and figure out the only way to get really smooth scrolling when dealing with complex cells is to manually draw them yourself and not rely on a collection of controls contained inside the cell. So there you sit, drawing out your individual cells with pen-style graphics methods and blitting text and images like you are a video game developer.
Most of the nice interactions you think of as being native, aren't. They are something that a developer had to do by hand. Even something like not having the keyboard cover up a text field has to be done manually.
I'm not saying it isn't worth the time to do a full native app, but it does require a lot of time, UIKit gives you very little for free.
Using the frameworks I've developed I can have a iOS app hit a web service and display a list of data in 30 minutes max.
I could write three paragraphs on all the "complex" stuff I'd have to do using JavaScript and CSS and make it sound a lot worst than UIKit just because I am inexperienced.
UIKit gives you so much for free. It is why so many iPhone apps look "iPhoneish" because if you follow the good programming practices you get them for free.
I would be interested in a more specific response to the parent. For example, given your expertise, can you diagnose his problem with jerky scrolling and offer a solution?
Doing high-performance scrolling is a hard problem. You just can't do it in HTML, at all.
Native code is not a silver bullet. If you're implementing a table view cell, the newbie approach is to just put subviews on the cell for each slice of content. This performs horribly because the graphics card has to composite all the sublayers while you're scrolling.
The faster approach, as he alludes to, is to do everything in one view, using pen operations to move around and blit each section. If you're serious about smooth scrolling, this is what you have to do. Tweetie was famous for its smooth scrolling, for example; it's because Loren Brichter used this approach.
Of course, if you're coming from the web/css world, doing everything with pen operations seems incredibly foreign and backwards. But you get good at it quickly. And it's worth it, UX-wise.
> Doing high-performance scrolling is a hard problem. You just can't do it in HTML, at all.
Not necessarily. Especially with Apple adding momentum scrolling to Mobile Safari in iOS 5. I have no problem smoothly scrolling through tables hundreds of rows long.
Back in the day of the iPhone 3G, iPhone 3GS and to a lesser extent the iPad 1, what adamjernst described below was how you got the best performance http://news.ycombinator.com/item?id=3692126
I would argue that nowadays with the power in the iPhone 4, iPhone 4S, iPad 2 and the new iPad (aka iPad 3) this is a premature optimization. The raw computing power of these devices makes creating a UITableViewCell with basic subviews total useable without affecting scrolling performance. I've worked on almost a dozen iOS apps in the last two years and that is all I do anymore.
Now about diagnosing the problem. 99% of the time the cause of the problem is one of two things:
1) Not reusing UITableViewCells
2) Doing way too much work on the UI thread
UITableView has a method called dequeueReusableCellWithIdentifier: which allows you to get access to a cell in a table view that is no longer being used. This allows you to reuse the cell instead of releasing the memory of that cell and creating a new one.
Memory allocation is expensive and if you had a table with 100 rows you could end up allocating memory for 100 UITableViewCells. Now on the iPhone if you are reusing cells you'd probably only allocate the memory 7-10 times (depending on the height of your rows) and then change little pieces inside it (like the text of the cell or the image that it is displaying). An easy way to see this is to create a demo app that has 1000 rows which are populated with random text, images you include in the bundle. Don't reuse table view cells and scroll up and down as fast as you can. You'll notice the scrolling is choppy. The second you reuse the the table view cells it will "magically" improve.
The second cause is people doing too much work on the UI thread. This is just bad practice and with the advent of Grand Central Dispatch and NSOperation you can simply take a block of code that is eating up a lot of time on the UI thread and pass it into the constructor of a NSBlockOperation and do all the work in the background. Some common examples of this are pulling data from a web service, converting data from a web service into local entities, reading from a local database (i.e. sqlite), sorting collections, etc.
If after solving these two problems your app is still jerky then it is perhaps time to look at adamjernst solution. But in my time I've created some pretty complex UITableViewCells in tables that have hundreds of entries and my scrolling is always butter smooth.
Can you explain how this is tricky to get working?
If we are talking about UITableView then it only asks you for a row when it is about to be displayed. So in that case you are only loading the image when it is about to become visible.
I have no idea how this is done in HTML and CSS but in iOS it is still extremely easy.
It's not bad if all your image assets is locally on device. It become difficult when your assets are remote.
If your image is remote, you'll need to put loading the image on a separate thread, and create a nonblocking http request to fetch the image. The problem is to draw the picture you have to use the main thread, so to make scrolling smoothly become quite a challenge.
I'm not sure what you could mean -- tableView:cellForRowAtIndexPath: returns a UITableViewCell *. Do you have an article describing what you're talking about?
But of course, doing pen-style operations instead of declarative markup is precisely what gets you the speed and fluidity of a native app.
When you open a video with many subtitles in the current iPad app, the UI freezes for a couple seconds. Why is that? Well, WebKit is laying out the DOM for a few thousand <li> tags (the subtitles). That takes a lot of time. I'm the iOS developer of the Khan app; I worked with John Resig who did the JS side. Ultimately we decided poor subtitle performance wasn't a big deal.
UIKit could easily add a table class that didn't have such complicated requirements. But then it would be slow, just like WebKit.
I agree with the point of your question, but I do know that in some cases it's a matter of codebase count. Which is to ask would it be better to have 1 codebase that serves as your website and native views? Or is it better to have X number of codebases for your views based on the number of platforms you'd like to be on? Especially when in all cases the views should be the same regardless of platform/native.
Sometimes native is forgone to provide more centralization of views. It's not always good to custom build for every platform when you want consistency in your UX across all platforms.
I see where you are coming from. And I agree that it's a trade-off.
But I think my point is, that from a usability point of view you simply have no other choice than having X codebases, one for each platform you want to be on, if you are not willing to compromise on usability. I don't know of anyone who tried themselves at the magical "write once, run anywhere" and delivered a consistently great user experience.
Of course, it would be hyperbolic to say that the Khan Academy app has some huge usability flaws. It hasn't. But I'm mostly thinking about another example here: Facebook. They're a billion dollar web company and even they managed to majorly fuck their mobile apps up in terms of responsibility and general snappiness. They tried "write once, run anywhere" and failed.
I'm the iOS developer on the Khan app, and not having to maintain a codebase for multiple platforms is one of the main reasons why we went with jQuery Mobile.
Khan Academy has a lot of custom logic (badges being awarded, points being accrued, and so on) and duplicating that across platforms would be a nightmare.
The breadth and depth of Khans work is nothing short of astonishing. His ability to put a large amount of information out there for anyone to use is an overwhelming kindness.
That being said, Khans work lacks polish. You could suggest that his informal presentation style is a plus, or that focusing on producing as much content as possible is more important, but I disagree.
His narration has an erratic cadence and he is often repetitive in a way that corrects or modifies the previous statement rather than building upon it.
His voice is not "radio-friendly", but thats my personal opinion.
The transcripts are poorly laid out and are nearly impossible to scan visually, there only use is for search purposes.
The information architecture is clear and to the point, but it's not oriented to the true beginner. Someone who doesn't already know what the labels mean wont know why they should or shouldn't learn these items.
I hope khan academy invests in polishing some of the great work he has put together so far, I think it would be worth the investment.
At first I too felt like a lot of the videos needed more polish, as well as some other aspects of the site. But eventually I accepted that it really didn't matter whether I was watching one of the newer HD videos or the older pixelated ones. It wouldn't help me learn.
I think the informal style is a plus. Making the videos more professional would risk them being the same thing as a textbook. In my math class, we occasionally do "flip teaching" using brightstorm [1]. Its basically a more formal version of Khan Academy, and I think the videos are super boring to watch compared to something like Sal's video on the squeeze theorem [2].
There's tons of other resources out their that sound like a professional voice over. However they have no personality and don't sound like a individual talking to you one to one.
They sound like they are are polished for a mass audience with no personal attachment what so ever to the user. They sound like a robot repeating facts from a book. This is opposite to khan. Khan takes the 'brotherly'(Despite never knowing you) approach to teaching, and sometimes makes mistakes and lacks a little bit of polish. I think this is actually the key thing that makes khan academy work compared to other suppliers.
Keep in mind how this all got started historically [0]. Khan was teaching math to his cousin and did this with what he had available. It is a very personal style and, yes, includes mistakes from time to time that necessitates him backtracking and correcting them. I haven't watched a lot of videos, but I've yet to see a mistake that he doesn't eventually realize and backtrack to correct it; sometimes within seconds, sometimes half a minute later.
Polishing it too much such that it's scripted with a professional voice actor would, to me, make the videos less approachable and would lose the charm. People pay thousands in tuition for university courses taught by professors who are also not perfect and who have no professional voice acting training either. I'm not seeing this lack of polish as a negative here. Actually, a lot of times I find professionally voiced audio to be annoying as hell because nobody in real life actually talks the way some of those cheesy voice actors do.
tidbit: in my high school I was given a math book and told to read the book at night, and do the homework in the classroom the next day. There were students at every level sitting at long tables. The two teachers roamed the aisles in case we had questions. They verified our work and pulled a few of us aside if we all seemed to be stuck at the same place.
Sounds amazingly like the 60 Minutes story I just heard.
Funny thing is, my high school did this in 1978, and the school was Berkeley High EAST Campus. Further, it was considered a punishment to be forced to go there.
Result: I did the 9 month Geometry course, developed at Berkeley High, in 3 months and passed the required exam.
First off, I'd like to say that Khan Academy is awesome. I've started using it with my 8-year old daughter to practice math and she loves it.
That being said, I have a few criticisms of the iPad app:
1. The title of "Watch. Practice. Learn almost anything for free" is deceptive. I think the strongest point of the Khan Academy web site is the practice section but it's not available on the iPad app.
2. The transcript is way too granular. It makes it hard to read and it makes the transcript really long in some cases. Breaking it out by paragraph (instead of every 3-5 seconds) would make it more readable. I don't even think the timestamp needs to be shown.
3. It'd be nice to see the directed acyclic graph of lesson dependencies like they have on the site. It's hard to know where to start when you have 2,800 videos.
Great job putting out the app though! It's great to see some good educational tools for the iPad that don't suck.
Thanks for feedback, and agreed on title. There are many 3rd party apps out there that have taken "Khan Academy" and we didn't want to go through the legal hassle or harm any developers using our API, so we added that on. We may eventually have 3rd party apps rename to something slightly less 100% official.
I really hope he can actually take his ideas to fruition. Getting rid of the "blob" (industry term he uses sometimes). Getting students to understand 100% of a topic before moving onto topics that use the previous topic as a foundation. Paying fewer, good, teachers $100k+ (this may sound bad, please watch the video to understand what the entails) rather than many (maybe good) stretched-too-thin teachers the wages they get now. etc. Amazing watch and well worth an hour of your time.
(It's not available in the US App Store on my iPad for some reason (iOS 5.0.1).)
Navigation by subtitles is interesting. I wish that existed on the website. Sites like MIT's Udacity have broken away from the barrier of losing the user's focus or being redundant by dividing videos into even smaller segments of just a few minutes with continual questions / exercises for instant feedback. I wonder if Sal is considering something similar.
I've seen the Exercises feature, but it lacks exercises for most of the videos.
Note that we are currently a/b testing the effects of offering a "transcript" button under each video on the website itself which does just this. If you're lucky, you may already have the button.
We'll almost certainly launch it to everyone soon even though the test hasn't told us much, just b/c we think it's a useful feature.
I noticed you're a KA intern. Can you comment on any interesting problems addressed or aspects of the iPad implementation? It appears to be fully native as opposed to a wrapped web app. Is that correct?
Naive question here, is there a real need for a native app for iPad in the first place?
Would the iPad's browser not be able to handle all the content on Khan's Academy?
Since his stuff is so low-bitrate, we thought we could get all videos down to the lowest of Apple's HTTP Live Streaming requirements -- even having the crappiest of crappy video is 1000x better than audio only when trying to learn algebra.
We were able to make a <64kbps version for most of the videos, but couldn't do it for everything. Some were just over the mark. We hoped for a little app store leniency given the content.
Eventually we had to give up on some problematic videos and offer audio-only versions for crappy streaming connections. Gotta ship.