The Changelog: Software Development, Open Source - Sencha Touch (Interview)

Episode Date: July 27, 2010

Wynn caught up with David Kaneda to talk about mobile web app development with Sencha Touch.

Welcome to the ChangeLog episode 0.3.0. I'm Adam Stachowiak. And I'm Winn Netherland. This is the ChangeLog. We cover what's fresh and new in the world of open source. If you found us on iTunes, we're also on the web at thechangelog.com. And we're also on github.com forward slash explore. You'll find some training reposts, some feature reposts from our blog, as well as the audio podcasts. If you're on Twitter, follow Change Log Show, not The Change Log. And I'm Adam Stack.

And I'm Penguin, P-E-N-G-W-Y-N-N. Sat down this week with David Kaneda. Yeah, he's got quite the resume I see here. Yeah, Cintra Mobile, WebKit Bits, which I find myself reading all the time, and before that, JQ Touch, which I think you've played with. That's a popular one there. Yeah, it is. Probably the bleeding edge of web development with the WebKit browsers on the mobile devices.

Yeah. I was pretty excited to hear that they were playing with SAS in this. Yeah, we're big Compass and SAS fans. If you've caught any episodes of The Change, we're users and fans of Compass and SAS, and they're using it in kind of a unique way to do their theming with all of their buttons and controls and pickers and things of that sort. They're using a lot of variables and mix-ins and things like that.

So what's cool about CintraTouch? CintraTouch lets you build web interfaces for mobile devices. You know, HTML5 is all the buzz right now, but it's a way to do it without having to learn the native platforms, either Android or iOS. Very cool. And I guess this is what episode 30, right? So that's 30 episodes for the

changelog. 30 episodes and all roads lead to SaaS, right? Yeah, right. Episode one and episode 30. And we're going to have those guys on soon to talk about a lot of the developments that have happened with Compass and SaaS since we last talked to them. That world is moving so quickly, I can't even take it. It's hard to keep up with. Yeah, if open source moves fast. Keep up. All right, let's get to this episode. Let's do it. All right, we're joined today by David Kaneda from Cintia. I'm going to talk about Cintia Mobile and some of the open source projects they have over there. David, why don't you introduce yourself and just let the folks know who you are and kind

of what you do. Sure. My name is David Kaneda. Before coming to Sencha, I ran a few open source projects, including JQ Touch. I also run a blog called WebKit Bits, which is about WebKit. And before that, I've sort of always worked within the design development industry. So JQ Touch, popular iPhone project. Tell me a little bit about how that came about. And before that, I've sort of always worked within the design development industry. So JQ Touch, popular iPhone project.

Tell me a little bit about how that came about. Sure. So I did my first iPhone app about a year and a half, two years ago. That was called Outpost. It was for Basecamp. That was a fully native app, which I did with a developer friend, Jim Dovey. And so as we put that out, I started to want to look into doing another app, probably for Backpack at the time. But really wanted a little more hands-on experience with the development of it.

And so after trying to learn Objective-C for a couple days and just not being too interested in the language and then sort of at the same time I just coincidentally was looking into the capabilities of WebKit and Safari on the iPhone, I started to see what was possible there. And there wasn't much in that arena that really covered that sort of native-feeling web app. For those that don't know, JQ Touch is, I guess,

a fair comparison might be a more polished jQuery-centric IUI. Yeah, I don't want to compare too directly to IUI. I think those guys were great, and especially Joe kicking that project off was a great idea. I think the big thing that JQ Touch sort of brought to the table when we came out was the use of hardware-accelerated animations was a big deal, adding a lot more animations in terms of 3D and flips and things.

And then we also just, by using jQuery, made it a lot more extendable by using sort of jQuery's event syntax and adding a lot of custom callbacks that IUI didn't really have at the time. So now you're part of the Cintia team. Give a little background about Cintia and its roots in XJS and what it aims to solve. Absolutely. So I came into XJS, which is now Cintia, in December. Before that, I had heard about XJS sort of in passing. I haven't done a ton of work in sort of rich internet apps like XJS does for the desktop. So their goal back then was basically to create the richest, most powerful

JavaScript framework for mobile as they've done for the desktop. And JQ Touch certainly had some elements of that, but was not the sort of application programming structure that some developers needed. So when I came in, I came in as creative director, and my role in the company has pretty much been split between the development side and sort of taking everything I've learned in JQtouch and help bring it to Central Touch. And I definitely can't take credit for Central Touch alone. We've had particularly Tommy Mines has been sort of the JavaScript mastermind behind it.

And we've had a lot of developers helping out with it. And I really think it shows but um my time has pretty much been split between that and then also doing the sort of marketing and branding side of sensha which uh you know including the rename and redesign and uh some upcoming design projects will be launching soon looks fantastic. Now, Cintia targets not only iPhone and iOS, but also Android as well? Yep, absolutely. So what are some of the challenges of hitting both of those platforms in one framework? Okay, so for those who don't know, both the iPhone and Android are based on WebKit, which is a browsing engine that's also in Safari and Chrome. As PPK has noted in the past, there are a million different versions of WebKit.

And so to make it work on both platforms was actually a good deal harder than we thought it might be initially. There's a fair amount of operating system interference with some of the elements on pages. For example, form inputs like text input and text areas are basically always controlled by the operating system when implementing WebKit. And so they can respond very differently to events or things like that. And then just general challenges in terms of screen resolution, especially with the number of devices that Android is on. And, you know, some minor differences in their WebKit versions. You know, talk about that for a moment. You know, I guess the main difference right now between Android development and

iPhone development, I think a lot of folks are making the comparison between Mac and Windows back in the day where on the Windows side they didn't control the hardware. They only provided the software. It's much the same model. Now on Android, you've got multiple flavors out there. It seems

like they're reproducing all the time. What challenges have you seen in supporting and I guess how far back do you support in that that stack yeah so publicly we're saying basically 2.0 um internally we obviously highly prefer a 2.2 or a pro yo um has been you know just has done wonders for them in terms of their JavaScript processing. I think the iPhone has always had a small advantage in regard to animations from having core animation built into the OS. So even in Safari, when it's doing a web kit

or a hardware accelerated animation, it's using the operating system level frameworks to accomplish it. And I think it shows in the smoothness of the animations. So in that way, I think Android's still... I love Android, and every time Android releases a new version, I want to think, like, this is the one.

This is going to be it. But just personally, I've always found iOS has offered a far superior experience. You know, one of the things that attracted me to Cintia when I first saw it was the fact that it was intuitive yet not native. And by that, I mean it's an interface that is very intuitive if you've used either platform, but it doesn't try to go that last 5% to really emulate the operating system, which seems like always leaves the user just wanting a little bit more because web apps are web apps. They're not native apps. Yeah. I mean, we've done, I think, a fair amount so far in terms of replicating a lot of native stuff.

The biggest thing and biggest talking point a couple months ago was just sort of emulated scrolling, momentum scrolling, and the ability to fix elements to a certain position on the page and keep them there. This has always been like a challenge in mobile WebKit. They've just never built it in because of some os type restrictions it just hasn't been possible so we have to sort of fake it with javascript and css so you know once that was out of the way we sort of moved on to a whole range of different native feeling components like carousels, pickers, things like that. I think the biggest thing that we miss and that we're just not able to do

is some of the hardware APIs that we're unable to reach. So in terms of open source projects, you have PhoneGap, which has been a great MIT project from Nitobe that opens up those APIs, lets people access the camera or access the contact list or, you know, even just easier audio and video, even though it's part of HTML5. You can actually get a more polished experience with them, you know, using some built-in native APIs. You know, you've got a blog post. This is actually your blog post. I didn't realize the byline the first time I read it. Getting sassy with CSS.

We're big fans of both Compass and Sass here. Episode one of the changelog was about Compass and Sass. Oh, was it? I didn't realize that. And we're going to have Nathan and Chris on very soon to talk about the latest and greatest Sass 3.0 and Compass 1.0 items that are out there. But talk a bit about the architecture of the themes in Cintia and where SAS plays into that.

Definitely. So the theming has been sort of my brainchild in the project in regards to development. That's been my major contribution. And I just think it's the most flexible sort of framework theming i've seen yet and um i'm just super excited about it like uh so basically sass and compass at a very core level uh provide you some tools in css that you've never had. They abstract CSS to the point where you can use functions, variables, things like that. In regard to creating a framework, a framework that includes a UI layer, especially like Central Touch, having flexibility and sort of making those style sheets

as compact as possible is a huge goal, you know, because customizing one's app is probably one of the highest priorities. And so we've done a lot with SAS and Compass in regard to making color variables, sort of overriding variables. And so you can, at this point, take sort of a Sass theme file. All you have to do is include our theme file, our Sass file, and then you can basically overwrite variables like base color or highlight color or active to change the entire look and feel of the application. Do you have a preference between the indented old school SAS style and the new

SCSS? Yeah, I used to hate the old style because I was so used to CSS and it just felt unnatural and its dependence on white space formatting was extremely strict. So if you had an extra space somewhere, it would throw off the whole compiler. Then we made the switch to Sassy CSS, the SCSS. And then I missed the old one because it was so much more compact. But now I've sort of gotten over it and I like it being a little more verbose with all the punctuation and everything.

I think it's better. You know, I'm an old school guy myself. I started a new project in the SCSS, the curly brace syntax, just to get up to speed on the differences and the nuances. And I gave it a couple of weeks and I just had to switch it back. At first it's annoying because, you know, you have so many more brackets and things. But the fact that you don't have these white space errors is a huge plus for me. And I also actually very much like the

fact that it validates as CSS. Even though it has no actual implications in the compilation process, it just feels better. That's a big plus. Let's talk about UI programming for a moment. So what is the programming model to build a Sentia mobile application? Most of the examples I've seen are purely programmatic. Is there any declarative markup style options available? There are not. So that is definitely the biggest differentiation point between JQtouch and SenshiTouch.

And we are keeping both active and running, by the way. So JQtouch has become part of SenshiLabs, which is sort of our new foundation set up specifically for MIT fully open source projects. So SenshiTouch is definitely programmatic. It's API-driven in JavaScript. We are investigating the possibility of doing as sort of creating the most robust, functional, and optimized framework is sort of number one priority at the moment. I could see that sort of thing playing in as sort of like a plug-in that you could throw on top of Central Touch at some point. But in terms of creating sort of actual, if you were to think about most sort of well-done iPhone apps, if you were to think about Twitter as an iPhone app, it's not something where you would want the bulk of your content really residing in the HTML page to begin with. It's more about sort of functional process and, you know, having some sort of application structure like MVC or something behind it. Well, I guess the upside of a programmatic approach like that is you could build tools on top of that

to build those interfaces at some point, right? Yeah, absolutely. And so we've done that on the desktop so far with XDesigner, which allows you to sort of drag and drop components to generate the UI classes for your app. And then you can just kind of drop those UI classes into the app and write your functional code around it. I think doing something like that for touch wouldn't be too big a hassle, though. Again, you know, we are still in beta with something for touch. So we have a little bit more to go on the framework before we start investigating tools and some extra plug-ins and things.

But they are all sort of on the plate as it stands. Well, we've hit on iPhone and Android, but we should mention that you've got really robust support for the iPad with the split window UI metaphors. Talk about that for a moment. Sure. I think the iPad, in terms of traffic and market share, it's not the most exciting thing in the world. There's still plenty of room for growth there. But in terms of what Sensha Touch can do for the iPad, I do think it's sort of unprecedented. It's definitely something you can't accomplish with JQtouch. You can make very native-feeling iPad web apps with Sentient Touch because of all the sort of layout and data options

that we've brought over from XJS. It's really just, at its core, Sentient Touch is really just an app framework and so sort of the more resolution we can give it and still having it

be a touch-based API you know a touch-based UI the better the more impressive I think it becomes We've got some

impressive demos up on the website one of those is the Open Congress application it looks like you guys are using APIs from Sunlight Labs which were were on episode 013. Did you have a hand in building that one? I guess the GeoCongress app is what I'm talking about. Yeah, no, I, so I helped design that app

and I helped style that app and I helped a little bit within the structure, but really that was mostly coworkers. I spent the majority of my time, so my demo was sort of the Kiva one in terms of programming. I did the majority of the programming on that one, and that was more of a lesson for myself. I just wanted to make sure I put an app out there before I started marketing the thing. Well, since we are an open source podcast,

let's talk about licensing models for a moment around not only the mobile platform, but the other projects that you guys have. Sure. So, as I mentioned, just real quick, so we just recently launched Central Labs. JQ Touch is in there. Rafael JS is in there, who I understand was on a few weeks ago as well. And then we also have a variety of sort of Node-related projects, which we're putting on there, including Connect and Express, which are some great sort of server-side JavaScript projects. I think that's one of the most exciting things happening in tech right now,

is stuff happening in Node. And I know we hope to look a little more into it as we develop our framework further. So that's all under Essential Labs at the moment, and we will be getting a site up to better highlight those projects soon. And then there are the projects which we offer commercial licenses for, including XJS, XGWT, which is a native port of XJS to GWT, and Sense of Touch. So what are your plans for world domination

around, I guess, JavaScript on the server side? It sounds like you're attracting some really sharp talent. Tim Caswell is a buddy of ours. He was on episode 017, and we know TJ, and those guys are out there. So what are you guys doing on the server with Node that's intersecting all of this mobile and client-side magic? Yeah, Tim and TJ are super awesome, super talented developers. Unfortunately, I can't really disclose everything we're looking at right now.

But you're going to give us a scoop when you get close. Yes, I will definitely call back in with the scoop. But I don't know what we're... I know a variety of things that we're looking at as far as inclusion with the framework and some of the possibilities that it's opening up are just incredibly innovative. I mean, I just haven't seen stuff like it before, but I don't want to bound the company

to a certain direction, especially because that's not really my field. Sure. Well, we come to the part of the show where we ask, kind of turn the episode upside down and ask our guests what's got them excited in the world of open source. So, I mean, that's a big thing I want to get into is learning Node. As we mentioned, Sass and Compass are probably my favorite two new technologies this year I've found. I just sort of can't get over how much easier they've made style sheet authoring. And like like I can't even think of like doing a one page site now without using

Sassacompass because it just makes it that much easier and then I don't think this qualifies as a open source technology I mean no it's open so the Yahoo's YQL has also been just a new thing I've just sort of got onto this year, which is incredibly cool.

I mean, so for those who don't know, YQL is sort of a developer tool from Yahoo that allows you to sort of query the web in a SQL-like format. And this can be sort of anything in regard to it could query a REST-based XML API, or it could query a JSON API, or it could even just screen scrape pages. It can do all of this with SSL authentication. I mean, the power behind it is just kind of immeasurable in that especially when I was putting together that Kiva demo. I think one of the coolest

things you realize when you're working with YQL is the second you join two data sources as if you're joining two tables in MySQL. It's really just sort of these data sources on the internet of these API endpoints. And it's actually combining data from the server side. And no matter what you use, it'll spit back the data it gets in JSON format.

So for web app developers, cross-domain issues have always been a huge burden because you can't really request certain types of APIs from different servers as a security precaution. But YQL actually removes a ton of those issues. So for web app developers, I think it's just one of the coolest technologies I've seen. Fun time to be a mashup developer for sure. Yeah, definitely.

Well, thanks for joining us today. I can't wait to continue to play with Cintia and see where the project's headed, especially as you close in on 1.0 and what great things the listeners are going to build with it. Definitely. Thanks for having me. I think we have a ton of good stuff coming. So there are plenty more secrets before 1.0 actually drops. But yeah, and I should also mention real quick,

we are going to offer commercial licensing on Sentient Touch, just like we do with XJS and GWT, which are split between GPL and commercial. And we will be announcing that within a week. So that's coming very soon. I know there are a lot of people waiting to hear that. Great.

Looking forward to it. Thanks, David. All right. Thanks for having me. See you next time.