Joe Lennon

Rants, Raves & Recommendations

Archive for the ‘extjs’ tag

Source Sencha Developer Conference – Day 2

with 3 comments

Day 2 of the Source Dev Sencha conference picked up right where the first day left off. I must credit the organizers on a fantastic choice of location and venue. The weather here in Split, Croatia has been consistently glorious since I arrived here. The hotel (Le Meridien Lav) is both an excellent place to stay and a great conference venue. Myself, Darragh Duffy, Jonathan Reardon and Martha Rotter enjoyed a really great meal last night in Taverna Bota Šare near the center of Split. We were promised by the concierge that it had the best seafood in Croatia and it really lived up to the high praise.

Before diving into my thoughts on day 2, I had better mention the party last night. My thoughts on conferences are that the best networking is done over a beer, and last night was no exception to that rule. Everything kicked off in a bar right next to the hotel with a steady flow of beer going strong for the night. There were some camera guys around so I’m sure some footage of our antics will surface before too long. I had the pleasure of enjoying some late night beers with Nils Dehl, Steffen Kamper, Aditya Bansod, Denis and Ian from EMC (sorry guys didn’t catch your surnames) and Ed Spencer. Kudos to the Sencha guys for resisting the urge to accept our random pleas for various features and products, they must have been well trained in advance of this event! ;-) I heard Ed respond with “No comment” on more than one occasion – he’d make a great politician!

A little hungover and very tired, today’s agenda was a great remedy for any headache. Things kicked off bright and early with Brian Moeskau giving an overview of how to migrate applications to ExtJS 4. Brian also held a practical workshop on the same topic later in the morning. Sencha deserve a lot of credit for their work on making this process as painless as possible. The compatibility layer is going to be hugely important for a lot of existing ExtJS developers, and the fact that both versions can play nice with each other means that companies like the one I work for can start using ExtJS 4 pretty much straight away. Brian’s excellent blog post on migration is well worth looking at. You can find it at http://www.sencha.com/blog/ext-js-3-to-4-migration/.

Next up was another presentation from James Pearce, this time on working with PhoneGap. Up until now our company has deployed our applications solely over the Web, but it looks like we will inevitably need to deploy to devices natively. Thankfully Sencha Touch and PhoneGap are a match made in heaven, and the process is pretty painless when you consider just how difficult it would be to create separate applications for each target device/operating system. James posted a screencast showing the final demo from his presentation, which can be found at http://vimeo.com/23358554.

Before lunch there was a schedule change, with Jay Garcia‘s workshop on JavaScript classes and scoping being moved forward. I have read articles, blog posts and even books that try to explain JavaScript’s prototypal inheritance and scope, none of which compare to Jay’s coverage this morning. I think many developers in the room had an “A-ha” moment when Jay explained just how the “this” keyword really works in JavaScript. Watching Jay at work today has given me the urge to really dig deep and gain a stronger understanding of just how ExtJS hangs together.

After lunch, George White (aka Animal) gave a great workshop session on using JavaScript debugging tools such as Firebug for Firefox, WebKit Developer Tools, JSLint and so on. Grgur Grisogono, who organized the conference, corrected a missing semi-colon in a code example, resulting in George nicknaming him “Mr. Lint” (Edit: Damian pointed out that it was actually Jay Garcia who gave Grgur this title in his earlier workshop, thanks Damian!). What I found best about this session was the numerous tips and common issues to look out for when developing ExtJS or Sencha Touch applications. At the end of the session I got the chance to meet James Pearce, and enjoyed briefly talking to him about how we’re using Sencha’s products in our company.

Unfortunately I didn’t make it to Steffen Kamper’s talk on Ext.Direct, but returned in time for Grgur’s closing keynote, which uniquely featured him jumping around and cheering on stage, much to the delight of the audience. Grgur thanked a lot of people in the keynote, but I think he deserves thanks for his hard work and effort into organizing such a successful event.

I wish I could tell you that that’s it for today and I’ll be back to wrap up the boat trip tomorrow, but alas I must return to Cork tomorrow, which involves an early flight to London Gatwick in the morning. It’s been a great conference, I’ve learned a lot and I’ve met many great people. Hopefully I’ll get to meet you all again in Austin, TX in October at SenchaCon.

For more coverage on the conference, see Darragh Duffy’s blog post which covers the entire two days. The URL is http://www.darraghduffy.ie/?p=294.

Written by Joe Lennon

May 6th, 2011 at 3:42 pm

Source Sencha Developer Conference – Day 1

with 5 comments

Day one of the Source Dev conference has been great – things kicked off bright and early this morning with an 8am keynote from Sencha’s James Pearce and an announcement from Aditya Bansod of Sencha’s new cloud services product line, Sencha.io. Some interesting points on the roadmap included:

  • ExtJS 4.1 will be released at some point this summer, with another 4.x release later this year
  • Sencha Touch 2 preview will be available at some point in the summer, with a final release targeted for Q3 2011

I get the impression that work has not started yet on Sencha Touch 2, but Sencha are gathering some ideas for changes and new features. It should be exciting to see what they come up with, especially given how amazing the first version of the product is!

The next session I attended was Ed Spencer‘s “Introducing ExtJS 4″ presentation. I have been following closely the progress with ExtJS 4, but this talk really cleared up some clear benefits of using the new version. Ed even went as far as to do some live coding in the session, illustrating how the new dynamic loading and MVC features make organizing and structuring an ExtJS application much more manageable. It was also great to see some Sencha SDK tools in action – these are going to make a huge difference when it comes to deployable high-performance production applications.

Following on from the Sencha.io announcement in the keynote, I had to attend Aditya’s session on the same topic to find out more. Right now, Sencha have made a commercial product from the tinySrc labs project, enabling developers to serve up much smaller image files to devices, without needing to create multiple versions of an image manually. More exciting was the announcement that freemium services for doing similar things with JavaScript and CSS files is on the way. This covers Sencha.io Src, but there is also the concept of Sencha.io Sync, which is in invite-only beta right now. It’ll be interesting to see how this evolves, but it seems to offer a means of storing data locally in an application to eradicate latency issues, sync’ing the data back to a central Sencha server when possible, and then replicating this data across devices. There was a cool demo of a crossword application, with changes made in a browser session updating immediately in a separate browser. Definitely one to watch, this!

The next session I attended was Jozek Sakalos (Saki from Sencha forums) speaking about how to write large applications. He had some good advice for developers regarding planning and organizing your projects before you start coding. I would have liked to see more ExtJS-specific and practical examples, but unfortunately time was pressing.

James Pearce was up again next for a talk on Theming and Sass. As someone who has done quite a bit of work with Sencha Touch recently, I am very familiar with Sencha’s use of Sass and Compass, and James’ presentation was very interesting. I learned some good tips about where to go to find all the different variables available for Sencha Touch theming, and it was great to find out about how theming works in ExtJS 4 and in the new ExtJS charts. I have to say James is a great speaker, very clear and to the point. At one point, James said that HTML5 is “a badge for the way the Web is changing”. With his permission, I might have to use that quote in HTML5 In Action, as I think it sums it up perfectly for me.

Went for lunch with my colleagues Darragh Duffy and Jonathan Reardon, and got to meet Martha Rotter, a developer from Dublin. Later at a coffee break I also got to meet Denis and Ian from EMC in Cork – great to see some Irish developers working with Sencha products. We’ll have to start a user group or something! Lunch was great, some really nice food – strangely enough coffee was not included though. Martha kindly sorted us out on that front though, so our caffeine needs were soon fulfilled!

After lunch, I attended Nils Dehl‘s talk on Ext.data and Ext.Direct. Nils uses Prezi for his presentations, and it really works well when showing large blocks of code samples.

The day wrapped up with Jay Garcia‘s presentation on creating extensions, plugins and components. I had an idea that Jay knew a lot about ExtJS (he wrote the book on it, after all) but I had really no appreciation for just how much knowledge of the underpinnings this guy has. He really cleared up a lot of things for me in relation to the differences between ExtJS 3 and 4 class systems and how loading works. I’m really looking forward to reading ExtJS 4 In Action and Sencha Touch In Action when they are published.

Looking forward to meeting more Sencha developers at tonight’s party, and hopefully day 2 of this conference will be as good as today was! If you’re at the conference and want to have a chat, send me a tweet or DM – I’m @joelennon on Twitter.

Written by Joe Lennon

May 5th, 2011 at 3:28 pm

Build Ext JS extensions and plug-ins

without comments

Ext JS is a comprehensive JavaScript framework that includes a vast collection of features, including cross-browser-compatible JavaScript helper utilities for DOM traversal and manipulation and data object stores. It also handles Ajax and direct web remoting, has an impressive collection of UI controls and widgets, charts and graphs, a powerful data grid control, and much, much more.

When developing applications using Ext JS, or indeed any JavaScript library or framework, you can be sure that you are going to need functionality that isn’t included out-of-the-box, or is present but doesn’t work quite the way you want it to. Thankfully, Ext JS includes a powerful class and component ecosystem that makes it easy to extend existing features or build new components entirely. In this article, we will explore this extensibility, specifically looking at the concepts of extensions and plug-ins. You will learn what each of these concepts means and what is different between the two. You will then see how to build your own extensions and plug-ins and how to source existing plug-ins built by other developers for use in your own applications, saving you from reinventing the wheel.

Read this article on IBM developerWorks at http://www.ibm.com/developerworks/library/wa-extjs/

Written by Joe Lennon

November 23rd, 2010 at 6:10 pm

Using Ext.Direct in Ajax applications

without comments

(This article was published on IBM developerWorks in October 2010)

The concept of Ajax has allowed web applications to evolve from being slow, unresponsive, and counter-intuitive to behaving more like desktop applications, delivering instant feedback, removing the need for page refreshes, and facilitating a much better user experience all around. The problem with Ajax is that it adds an additional layer of complexity to application development. In an event-driven application, you might perform an action when a user clicks on a button. In traditional application development, you can put all of your logic for what this action should do right in the event handler, but with Ajax it’s not that easy. You probably do some client-side validation, and if that is passed, you prepare your data and create a new Ajax request. You then define functions to handle a successful response and a failure. Then you must create the server-side code that will handle the Ajax requests and return a suitable response. This will probably need to be in a certain data format, such as JavaScript Object Notation (JSON) or XML, and you must provide it in such a way that the client side is expecting to receive it.

In short, Ajax development requires that a web application developer maintain a set of code both on the client side and on the server side, and there can be huge differences in how both work, making it difficult to debug and maintain. It would be great if developers had a way of calling server-side actions on the client-side, minimizing their exposure to all of the Ajax request and response handling. That’s where Ext.Direct comes in.

At first, Ext.Direct may seem like an overzealous solution to a small problem, but by investing your time and effort in it at the start, you’ll start to reap dividends later on. The initial hurdle of getting the building blocks of Ext.Direct working may seem complicated, but it typically only needs to be done once, and after that the changes needed to add new classes and methods are very straightforward. In this article, you learn how to get started and put the building blocks in place, and how to actually use Ext.Direct to call remote PHP methods from JavaScript. You then learn some of the more advanced features that Ext.Direct has to offer, and how to take full advantage of them in your own applications.

This article is available on IBM developerWorks in English and Japanese.

Written by Joe Lennon

November 16th, 2010 at 5:43 pm

Compare JavaScript Frameworks

without comments

Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

JavaScript is an object-oriented scripting language that has long been the client-side scripting interface of choice for Web browser applications. JavaScript lets Web developers programmatically work with objects on a Web page, providing a platform for manipulating these objects on-the-fly. When JavaScript was first introduced, it was commonly used to provide trivial features on Web pages such as clocks and scrolling text in the browser status bar. Another common feature was the “rollover link,” where an image or text color of a link would be changed when the user rolled their mouse over it. In recent times, however, JavaScript has evolved to become far more useful, with the concept of Asynchronous JavaScript and XML (Ajax) bringing a whole new level of interactivity to Web-based programming. Prior to Ajax, any server-side processing or database access would require the entire page to be “refreshed” or a new page to be rendered by the browser. Not only is this slow and frustrating for the user, but it is also a waste of bandwidth and resources.

Read the article at http://www.ibm.com/developerworks/web/library/wa-jsframeworks/

Written by Joe Lennon

February 8th, 2010 at 10:12 am