 Hi once again most of the guy was anybody there my people everybody who's not there my previous talk yeah Few people okay, so I'll just custom only do this whole self-pimping and Okay, this talk is about two frameworks for building mobile applications a Framework called jQuery mobile and another framework called center touch now before I start telling you what I am who I am Anybody who is like doing stuff in jQuery mobile here. Can I see the hands go up? Two people awesome center touch Not any three people awesome anybody who's like doing stuff around mobile itself like building apps or mobile Cool awesome. Okay, so This talk is about these two frameworks and the juicy details in You know why this is the customary intro slide I need to run a Christian for worldwide developer evangelist Just to show that I'm very important. I put the word worldwide over there, but I also go to a Bangalore and No, I'm also a moonwalking musician More than that later a big drill theater fan people who like progressive rock And most importantly, I know very nice Remember that okay So this is my pitch for this talk. I cannot put the word. I wanted to say in the slide But what I really mean is opinions are like assholes. Everybody has one Right so the point is when you actually start telling me no, no, I don't agree with you This is like really cool to do with JavaScript. That means you actually are having one Just the way when I am saying it I am actually having mine And it is completely normal to have one So let's not fight over shit here. This is my opinion about what is jQuery mobile? What is sent your touch and how I like it and how I do not like it now if you don't like it That's like really cool But if you're already like a big geek in center touch We're already been like three large-scale applications and two enterprise applications and sent your touch There's a brilliant session on the other room. I recommend you to go and check them out because I don't have anything But if you are here to figure out what these two frameworks are about from humble beginners We are at the right place. That's what I'll take you through and one final disclaimer I have not built a Facebook application using center touch or jQuery I am a person who is trying to evaluate these two frameworks and try to tell you how exactly this would plan out for you For your being and finally I believe strongly in this Don't use frameworks As much as that pads my ego and everything else It is not always true because If that was true, why would we care? Why are we here? We are here because there are no problem. Don't be shy. Come in. Come in I'm gonna wait. There's a person who left. So do you want to come? Settle down gentlemen. Are you comfortable there, sir? Okay We have not done anything. We just said couple mildly abusive things and the small introduction That's all we have done. We have yet to enter. Please come in sir. Don't be shy All right, so why should we care? Why should we care? Can somebody tell me why should we care about micro frameworks? Why should we care anything that is built on top of cork? Can anybody tell me? Brilliant point. I'll go drink beer. I'll take that. Okay. Anybody else agree man? Anybody else? Don't be shy man. Why will we use a framework? Well, everybody knows that everything can be hand coded from ground up. Why are there frameworks? There are frameworks because Real applications Because it's not always about what you want to do It's about what you really have to achieve that should dictate whether you will use the framework or whether you will code Right, so you are free to have your opinion like I mentioned, but then it's important to understand why there are Micro frameworks, right? This this this talk of mine. I'm trying to have a conversation with many of you I really appreciate if you guys could actually answer back some of the things so I can understand the perspective of which we are coming When we talk of web application or a website What are we really building? Are we building a website? Are we building a mobile website? Are we building an application or are we building all of that? We're all building all of them right think about it We're all building all of them but as much as we know we are building all of them What really happens is that we acquire one skill in many a times unfortunately, it's jQuery and We apply it democratically across all these problems. We do that Is there always the correct thing to do? Maybe maybe not I mean Noah's harsh right because our people believe really crazy shit with jQuery mobile And it's just jQuery. So Noah's wrong But he said always the right thing is a question that we need to continuously keep asking back to ourselves I Will cut the preachy stuff in a while because I have real demos to show like the previous time But I have to get the context going I'm not going to Talk to you about the virtues and vices of framework. This is not what it is about So if you're building everything you need to actually look at each problem in isolation I actually start thinking about whether what what framework or what technology or what kind of paradigm you want to apply Across the solid problem right Those slimes are directly flicked off the implicit. Yes, I really liked it So I didn't even change the template of that. I just like the way it animates. So that's what I meant So your choices would very based on how you answer the last question. I think we unanimously answer the last question Have you want to build? Everything right Okay Self-explanatory Every everything starts from here set up and configuration if you're actually building the application like my previous stop Where there's no setup like you know You're just trying to link a few simple tasks and that we throw a style sheet and you're ready to go But then in a real situation set up and configuration will actually mean a lot of things like you know the more The more abstracted you are the more on frameworks you are the more you need to pay attention in terms of how this thing is done That's step number one step number two is there's a two over there. Okay. It's just bad typography Bad projection. There's a two in there. So and the approach That's what should really matter now. Let me I'll possibly ask a question. How many of us actually write HTML markup How many of us like to write HTML markup? Answer it very carefully. How many of us like to write HTML markup? Your wife is gonna love you man I See It's just that I don't know what How many of us like Doing UI with markup. That's a different question Some of us have to agree because maybe doing UI with a combination of markup and CSS actually changed the way We actually look at doing UI So how many of us like to write only JavaScript to do it He has your nice and bright smile Maybe that explains now he has that patience and perseverance to actually write a button in JavaScript And then set a label to it And then there is no real job inspection so you have to put a break point and see if this damn thing is actually firing But it's a good thing there are frameworks to it is one of the frameworks I'm gonna talk to you about actually follows that pattern. So there are many many more like you Okay Was that Okay, there are many many more as I said, yeah, okay So I'm just gonna call out some random slides here. See jQuery. I work for Adobe I mean I mentioned and I have had the Privilege of Bail or whatever you want to call I have contributed to some aspects of jQuery mobile Framework mostly around the theme or application. I'll showcase that in a while at the question of looking at it. So some of the other stuff that You want to think about jQuery is that most of the web developers that I talked to the website developers that I talked to they tend to like jQuery because nothing changes Right the way you are doing websites all through of your life by writing simple markup that entire methodology Continues and you can actually start doing your stuff, right? Componentization is super simple in jQuery mobile. I show you demo, which is because it's just Attribute based model write a div make it into a button make it into a Foo bar make it into anything that you want list It is just attribute based which makes it super simple Attribute driven teaming even better like you simply say data team be Data team you actually start getting things that look really nice. So some of these things. This is the whole seat the underlying CSS you are Figured, right? And at the same time sent out How many of us actually dislike sent out? Oh Let me see the faces. Okay, fine. This time is very interesting. Okay there. Can you put the hand up again for being Sencha haters incorporated they have a one Awesome, okay, Sencha would mean no mock-up all JavaScript Smiling friend of mine here would not mind that okay Explicit component model a list is actually a list and not a div and Not an a You do the question you'll come to that. I'm very there when I put my first slide I will throw that up again. Oh, that's just a joke So right so I Really like this by the way, I mean I'm just doing a plug for this and I'm not a fan of coffee script I'm not generally a fan of anything that is cross-interpreted, but I tend to like Say assistant and compass Yeah, so that's something which I really like what central I really like this aspect the it's it's inherently MVC I mean you can actually do your stuff in an MVC friendly way and it comes along for free Okay, I'm done The painful part of my presentation see I mean I spent a lot of time to get to the space lights now we go to the easier part of This whole talk of mine. I'm gonna actually Start doing a demo and like always I like to do my demos and not show my so All the previous few number my previous in all the caveats I mentioned there applies because I'm gonna code up something in both the frameworks then again Like I mentioned it's a beginner level thingy Like if you've already done crazy lots of stuff in Sencha and jQuery You're not gonna find this super redundant and a waste of time But now that you're so negative into my talk just bear with me But people who I can keep getting started you will get a picture of what it really means to take these two frameworks and actually build a Simple problem. Now, let me ask you a problem statement Out of 10 mobile applications that I Look at Nine of them will have a list in its own screen. All of us agree or no? Nice-looking lists of course not the the ugly ones, but they are An implementation of a list so which would also mean that being able to build a list based application Would be an important challenge to solve in mobile applications. Do we also agree to that? Yes? Yes, thank you That's always nicer to be more affirmative sir. I understand we agree on right so as trivial as it would look like I'm going to start out on a simple pursuit to actually create a simple non-data-driven list-based application in both the frames I will do jQuery first then I will do EXTJ's Sencha and then we will pause and we will spend three minutes to badmouth support Which approach but but objectively we will understand what each one of them meant that's what my intention of the starters right see it for yourself Come to your judgment in terms of you know, I like that one or I like this one. I'm not gonna tell you that right so What time am I? So you're probably at 15 15 minutes, okay We will do this quickly right, you know and I will keep talking as I write My demo if something earth shatteringly wrong or something that completely not making sense to you Please interrupt me. Otherwise, let's circle back once and through with so that we can actually save up some time Cool without you guys if they're like if I'm missing semicolon. So if I'm actually doing something wrong Same drill once. Okay. Okay, I don't like to write boilerplate. So just gonna copy paste this But I'm gonna write everything else pretty much That page looks fine. I am also using a rather old-ish version of jQuery mobile. It is the least henceforth It's just that I was lazy to copy paste a template from Dreamweaver. It's actually one doctor. It's not a beta anymore But for this demo that I'm showing you it should just work But then I do realize that we have a new version of jQuery available. Let me just quickly Get the markup from here What do we see here? So this is a classic jQuery mobile application Which starts with a tag which has got a data roll called page right and also has an ID and a standard Unmodified jQuery template will consist of the three elements that we have which is the top level is the page followed by something called a header something called a content area and something called a footer and If you actually observe carefully most mobile applications tend to follow that pattern not so much footer but definitely header and Content, right? So now what we are simply aspiring to do here is to create a Simple list no data nothing. So there is actually a Unordered list tag that I put over there the UL and this is what I meant by saying you can have Attribute based component behavior which is data roll I'm saying is list view So henceforth whatever will be added into this unordered list. What goes into a UL? What is the tag li correct? So what are li that you're gonna put inside this? Is going to act like not as a bulleted list but as a Mobile list right can we try doing that? I can run this right? So let us just Quickly do that demo one that is Pretty much what a list looks like right that's got already the the the styling it actually has a header and footer It almost looks like one of those nice little fat ass mobile List icons you did nothing right if you saw that it was like dead simple now if I want this to look any different I will just come here and say Data theme so the jQuery follows a B C D E until Z sort of theme mechanism So each one of them actually point to a CSS file So it simply takes that value and kind of finds what CSS file you need to use and actually puts it So let me do this The more classic Ios Sort of look so so all you needed to do is that much To actually create a static list now if you want to be able to click it You're actually put a anchor tag inside it and it can actually point to a different page and source So who likes this? awesome, isn't it? But will that solve all your problems? We will see you know why see that is that that's the thing about How do you work with insurance agents ever? jQuery mobiles sense of eCNS at times is like an insurance agents promise You go figure. It's not a bad thing. It is not a bad thing, but you always read the fine print, don't you? Because they actually play that in double speed. I do that in my studio You know what that is Yeah, it's pretty similar to them are joking. So whenever you see something like really simple This should not be your reason to actually adopt jQuery mobile Right now we'll take it a step forward and add like a dynamically populating list like you know you run through like a loop and add Let's say 10 elements. Can you do that? Sure Believe time, please man 20 minutes So I have 10 minutes more to go, right? 15 minutes Yeah, it's fine. Let me not waste my time. So document ready is a common thing. So I'm gonna do Any of that and let me go do We'll make this quick. So Perfect. I'm gonna run a for loop for like 10 elements and I want to add them to the list so what do you have to do we will say Anybody familiar with jQuery would know what I'm doing so this is my Reference to the list that I'm going to use add stuff into and All you need to do is I'm going to just use a snippet. So I'm just going to get a Simple thing here like one string is L I this is fine. So it's like item 0 to 10, right? Yeah now I can say something like The append method of jQuery allows you to accept a DOM element or a snippet of HTML all of us know that and Can I run this now? Right, let's see what happens. Let me just take off those hard-ported ones. We don't need them anymore So I'm gonna take that off and let's just run this. Let's see what we got This is what we got. Does that look like a list? Doesn't right doesn't look like a list anymore. It's just a So that's something which you know jQuery does pretty well, so you just come over here and say This to you is anybody who has worked with jQuery. We would know what an initializer is like, you know It's asking that particular DOM element to act like a list so let's Right and the beauty of the whole refresh method in jQuery mobile a good thing is that it actually knows what is getting added So whenever you are adding like 10 more elements to it jQuery mobile actually Refreshes only the styling of the added 10 elements So it will not reload restyle the entire thing which actually gives it a pretty good performance Right now that is how long did I take to to do a jQuery list? It didn't take too long Was was that simple enough? You guys like it? I mean at least in terms of the city now we are going to switch gates We are actually going to do the same thing Using same thing. Yes, there's a question Do you manage MLH with the correct correct? So what what really happens in jQuery mobile? Unfortunately is that you know whenever you're adding stuff on to like a DOM child jQuery sort of functions are a different instantiation model It does not want to do that Dom traversal every single time the DOM is modified because what happens like a jQuery to the inherent Model with jQuery's program the moment you add something onto the DOM if it actually triggers The DOM repainting people to do crazy stuff on mobile like you know You can probably add like nested children. So what jQuery forces on is like saying if you're actually Converted a dip into a component It is your own us to actually tell when I should reapply the styles onto the DOM So the same thing if you actually just read that element now and said dot inner HTML is this li and just call the stylus It would just work. It was just that jQuery is forcing you to Believe that you're actually working with the list. You know what I mean So in jQuery, the issue is we're actually working with the diff but in real jQuery wants you to believe that you're actually working with her Doesn't it create an unnatural thing? This is very simple. I mean it's as simple as writing an objective to see the widgets But ideally if I use a browser, one of the things natural things to do is to use something like a template Let's say I use fine taken point taken every with you But unfortunately, that's not what jQuery thinks about this, but I believe it. So that's that's what I mentioned The beginning of the talk as well. So I said real guys do not use frameworks. That was my first statement that I mentioned So what you're saying is that I agree with you But then probably there are there are pros of actually using this and you know people I Try back with you on this one. We can actually shut up about this So for want of time and you know, I have to show you a couple more demos. Let us Now do that you see me Okay, I have a Bootstrapped in a boilerplated html here, but as you would see there's nothing in the body Because as I mentioned earlier, sir, we are going to write our JavaScript Right, so I practice this five times. That's why you have simple list five. Well, I'm going to practice it once again So simple as six, I have nothing to hide from you It's not pirated. It's just that I didn't buy it Before somebody saves that you know once I'm retweeted that to like I had an Adobe software and it said pyros expired Now might so, okay Thank you, I'm losing concentration Thank you. So this is how you start every Sencha that shows EXT project No, it has got a whole set of things that you have to do like, you know the gloss icon the start icon I'm not going to do any of that for want of time I'm simply going to do this is the same as your document dot ready If I'm making any syntactical errors, I'm not a framework guy if I make a syntax or somebody point to me the Sentcha gig see I can help me with that. So Right now, what do we want in this application? We want to reproduce the same header footer Thingy, right? So let's do so What sentcha wants you to do is what they want you to create what is called a panel So you will say Anybody who has worked with Java here or like any of the programming languages would actually Understand what this is. It's just instantiating a component and supplying Properties to it in a simple object notation. Correct. So you will say What is animation when you're moving between two things? What is the animation that it should play? So I'm saying place like that's the most common thing, right? this is the important part and Array of items or views that this panel should contain So I'm since we are going to have only like a One list in this no, but that's how we're trying to implement. So I will come here and declare a Simple list fine and say a simple list this equal to Shall we run this? Do us any kind of magic just work some random HTML appears there Right now. This is just HTML right inside the view But what we really want is the list and what is the inherent property of a list? One it has to be a component right has to have contain something and then it has to repeat That's how you get a list one after the other so so for that the first step We need to do is make this into a compound. It's a pretty do 30 minutes down You just create a new EXT component, which is the one which will be rendered as the list item henceforth now The thing is here Sencha has this very interesting concept called templates somebody just mentioned coding templates the way how you could use templates instead of Calling the list view or refresh and getting into the pattern Sencha takes it a little differently So what they actually ask you to do is just create a simple HTML template and HTML template is nothing but a comma separated HTML elements that is suppressing the template So since it's passing as a property you cannot have a single string So it is taken as a comma-separated by our test so something like this see this It's not it's not difficult at all. So I have a div a heading and it's going to template actually take something within curly braces It'll take a heading within curly bus. It takes a text right so now what I can do is something super trivial I'll create a Method called refresh What do we have the template heading right and what else do we have correct and now I will simply say So now if you run, what did I do they close that? Okay, let's run this Fine. So with that logic if I do that should repeat right? Not only does it not repeat it actually breaks your code That's because what you need to understand in in program is whenever you have an iterative thing You have to actually ask the template to iterate through it You know what iteration is that you supply an array you have to go to each and every element of the direct and then populate So that's what this particular piece of code does for you. So I'll just replace this So I have an extra piece of code here Which says tpl for dot when you say tpl for dot what it typically does it takes the array that has passed on to it and I trade through that enter Let me run this again is there This should just work But no styling it in jQuery mobile at the same situation. We already had the styling baked in But here there is no style right now I can you can argue that I can actually take it a Step forward right my own CSS to style it which is correct. You can actually take a CSS and style it so here is your sentcha touch code to create a simple programmatic list and here is your jQuery mobile code to create around this one. This is actually a nicer piece of code. Where was that one? They moved on me, right? so here is our jQuery mobile code now we saw two different approaches one is the markup plus HTML based approach where some default styling was applied to you and we saw EXTJS approach where nothing was on markup and we got everything else working by writing tasks Let's quickly go back to the presentation. So this is my opinion. Like I said This is my feeling page based model very good for guys who have been writing HTML pages all throughout your life Who are familiar with HTML easy ramp up all of us agree easy ramp up part Do you remember what I wrote in sentcha? It was difficult because it's it's structured, but plays well with others Jake that's a good thing about the whole jQuery thing you can actually throw angular there You can actually throw some other frame well That's that's a really nice thing. I will pull up theme role in a while. It's an application that I really like and Nice default looks the default look was in itself pretty presentable But super limited component set since we took the nice example of list We are good, but then the component set is not really extensive everything else that you want You have to take a third-party plug-in or write your own no physics based scrolling It's a big big big big Stopped stop huge dead stop blocker. There's no built in and there's no touch charting That's something which sentcha brings inherently to table very iffy documentation This is my opinion all you got is the jQuery mobile website if you have a question your review source and see what they've done I'll go to Stackover flow and it potentially lets you write really bad Because there's no control imposed on you You will actually throw in whatever markup you want to do write your code Wherever give water random IDs that you want to give to your code really no templating again Reacting the point that he mentioned it is like random code thrown everywhere Yes See basically the charts which actually work with touch interactions You know you can build on Pros of sentcha touch as I see elaborate components that touch charting built in layouts That's something which I didn't demonstrate But if you want to show a vertical layout or a horizontal or a card layout Sentcha has components for that for in jQuery You'll have to go and tweak your css to say display block display None or your position absolute position We have to do the whole css magic to get your layouts going here MVC of course I'm a bit fan of being able to write MVC of applications and forces you I mean to say sorry to the typo Forces you to write good code As you saw the way I wrote the exp application You cannot do a lot of bad things in there It's pretty rigid and enforced That is the way you do it And at the long run you'll actually see that you have written Actually a far more manageable good piece of code The cons It's completely unsuitable for web pages When everybody's doing the web pages or websites with sentcha touch He will be a very patient individual Or he's getting paid like crazy loads of money and I want that job Higher learning curve Too much boilerplating 28 lines of code to actually show a small list It's not boilerplating it's a wrong word but And the fourth one the most important one Which is like a huge deal breaker for me It's a lock-in threat You become a sentcha developer Are you becoming a web developer or are you becoming a sentcha developer The more and more you start getting sucked into this markup You will become an expert at that And you will not give a damn about JavaScript in general That happens and that's very painful for me I am a no frameworks guy I like to write plain simple stupid JavaScript So anybody who is like a sentcha programmer is not funny for me I mean I'm not very impressed by a sentcha developer You should be able to do sentcha that's fine But don't want a sentcha developer There's no real introff story You're a sentcha developer It's almost like You don't need anybody else I give you everything that you want That's the kind of IQ that I see from them Again, one more demo I call this the other one I need to be really quick at this I know that You're like seven minutes Yeah, five minutes That's it Customary Twitter application yarn You can yarn now But that's all I got time for I planned it correctly So I'm not going to code this I'm just going to show this to you Which I have already pulled it open here So this is my jQuery mobile Twitter application That's pretty much the code You can just quickly take a look and reflect Everything that we spoke about is already shown there It calls an Ajax uses JSONP As the way of getting the data back So I don't have to go through this code Cross-domain madness And here list.append You are just throwing some simple markup in there And you are through And list.refresh Let's quickly run this So that is That's nice, isn't it? I said there was no Real physics-based scrolling But this is nice plugin called iScroll You can go check it out by a company called Cubic It's a plugin called iScroll Which actually makes your jQuery mobile applications Have physics-based scrolling So if you insist that you want to continue using jQuery mobile And then this is the way to go Now let me show you the other piece of code Very quickly I have to scroll So I have a template Everything that we have seen I have not done anything new here You have like a title You have like a template And you have created a panel And you have a simple jsonp request here As you see And you are calling timeline.append Honestly if you want to do code-to-code comparison Number of lines to number of lines comparison They are not very different Both of them achieve the same thing In a similar set of number of codes And that is And let us quickly run this So a little more control So I actually put a nice little web font over there And kind of did a little more styling But jQuery had the more app-like look And this actually has So that's about CSS But then you can typically see The number of lines of code that you have to write For both these frameworks are sort of similar Let's quickly go back to the presentation Yes Anyone, someone Questions jQuery mobile give any provision for local storage Any jQuery mobile limiters doesn't But you can always write it jQuery mobile is more like a UI framework So it's about doing UI So if you want to do stuff around your data You can always go jQuery mobile won't probably come Any other questions So this componentization Doesn't all the application do the same way? Yeah, so yes If you are actually leaving it as a default look You're going to have a run-of-the-mill application Which are all looking the same But honestly speaking I think this is a huge step So let me just quickly pull it This is actually a great step forward To actually have better control Oh not this one Where the hell is that? Go to jQuery mobile Hey Harish After this we should wrap it up Yeah I'm done So I'm just going to pull this up and I'm done So let's get this pulled up So the theme-roller is actually a very good solution For actually styling your applications To a little more detail than what you can But still his point sort of stays So you can do stuff like this And you actually get a different look It's actually pretty nice So it's a good application You should probably go and try that out And for Sencha There is SAS's plus compass sort of styling Which is actually far more controlled And far more nicer for advanced developers So both of them have their own options And I have ran out of time Please find me outside for more questions Very quickly VR, etc Today evening Those are the coordinates So it's hsivaram.com slash tech Pretty much everything is hsivaram So if you have one, you pretty much have everything I myself took jithap hsivaram I forgot the password And I somewhat don't know how to retrieve it back So hsivaramx on jithap Right And it's true It's true Yeah Thank you very much