Jul 27

Cleanup of manual animation via Dojo Animation

Bespin, JavaScript, Tech with tags: , 4 Comments »

When posting on the Bespin Pie back in the day, I showed the Dojo animation code that we used to fake out our canvas pie animation:

var anim = dojo.fadeIn({
    node: { // fake it out for Dojo to think it is changing the style :)
        style: {}
    },
 
    duration: 500,
    easing: dojo.fx.easing.backOut,
 
    onAnimate: function(values) {
        var progress = values.opacity;
        renderPie(progress);
    }
}).play();

Pete Higgin’s hinted that we should cleanup this hack (asking to do the opacity and then getting the value back out) and finally (due to a weird bug in a WebKit nightly that gave me reason to poke) I cleaned it up:

new dojo._Animation({
    duration: 500,
    easing: dojo.fx.easing.backOut,
    curve: [0.0, 1.0],
    onAnimate: renderPie
}).play();

I am sure there is an easier way too!

FYI, the “pie” is finally a pie menu in tip, which will make its way to a Bespin version push soon with functionality we have been dying to get in production since the initial prototype.

Jul 21

Feeling much different about Apple these days; Time to take the blue pill?

Apple, Tech 24 Comments »

redbluepill

My family has Macbooks solely. iPhones abound. We are an Apple family. I look around at work, at conferences, at the coffee shop…. and I see the same. Macs may be a small % of computers purchased, but they are an important percentage.

I jumped from Windows with glee. Finally, I can be productive with my computer. Things just work. Unix is under the hood so I can tweak away. I enjoy my computer. All important stuff and well worth paying for the BMW of laptops.

My fanboyism is waning though. My feelings are becoming more complex. The white/black of Apple/Microsoft has finally gotten the nuance of grey/grey. Whatever you say about BillG/Microsoft can you truly say that Jobs/Apple would have done any better in the “monopolistic” stakes?

It seems that with Apple doing well quarter over quarter we may get to see… via the iPhone. I am incredibly torn here. I love the iPhone, and it has changed the world of mobile. It feels like every year at JavaOne, someone would shout “mobile is here!” yet J2ME never brought it. No one did to the same extent as the iPhone.

Corporations are not intrinsically evil. Their goal is to create share holder value. There are various paths to this goal, and that is where it gets delicate… but I don’t think of corporates as evil. Making money is a good thing. Watching the ebb and flow of the business models on the Web and in software itself…. I am always looking out for where the business models are. Many long for the “good old days” of software. The simple days where you create something of value, and people pay money for that value directly to you. We went through shareware and freemium and ads. Others shout from the side line claiming that people will still pay for value! So, although I think keeping the core infrastructure of the Web open is vital (hence working at Mozilla!) I don’t think that everything should be open source and free.

I am getting a little worried about the mobile Web and the future of services and platforms. I think that users should be free to run their applications where they wish, and should control their data.

With the iPhone the platform is incredibly locked down. You basically have to use their tools, and built applications using a Mac. Then you get to send your application up to the Apple gods (reviewers) and if you are lucky, an end user can run your code. Unfortunately this process is cryptic and poorly implemented right now.

Apple can make a case that this process helps “keep us safe” (make sure apps do no evil) and “makes sure the store isn’t swamped by crap” (however there are a ton of crap apps!). I think that we should trust users and they should be able to install whatever they bloody want too. Apple should have a system that propagates known malware. A way for users to crowd-source issues just like Semantec is working on. As a developer I really have to wonder when I know that I could spend a lot of time on an application that a random Apple chap could block and thus wouldn’t see the light of day. No thanks!

Time to take a pill?

I am starting to feel ready to take the blue pill. To take it perhaps a little far, Apple has enslaved me by giving me yummy food (great hardware and software). It tastes so good, that I eat it and say “thank you sir, can I have another!”

I am picking on Apple a little here because it relates most closely to me, and the iPhone is exploding. I see how they are tying the block anyone out from iTunes and lock me in to their world. The world that Steve wants for us. Sorry Steve, but I am getting close to jumping from your utopia to create a better one, even if it doesn’t smell so nice.

The future has other fish to fry. As we think forward to a world without single devices, but instead with everything being a connected embeddable systems… maybe right in your clothes. In this world the battle will be for data and services. Who owns your data. Are the business models transparent? I have a funny feeling that we will have to constantly fight for this. Corporations don’t care, but people should, and some do.

I have always had this in the back of my mind with Apple. I didn’t jump all the way in. I kept my music apart from iTunes AAC lock and structure even though it was against convenience.

One side of my brain wants to continue. Take the red pill and enjoy a productive happy life. The rest of my mind is contemplating taking the blue pill. Maybe it will be ready with an advanced open web platform on the phone, one on the desktop, and eventually….. everywhere.

Is anyone else having these thoughts?

Jul 17

Opening up conversation on browser interrogation tools with Browser Memory Tool Prototype

Mozila, Open Source, Tech with tags: , , 9 Comments »

Do you sometimes feel like the browser is a black box? We are building richer and richer applications on the Web platform and this means that developers are running up against new issues to debug and test.

We feel like it is a great time to develop new tools that afford you the ability to look into the runtime to hopefully help you find a bug, or allow you to keep your application as responsive as possible.

Today we want to start a conversation about some of our thinking, with the hope that you will join in.

We have been taking a hard look at the tools landscape, and here is a presentation that gives you an idea of our thinking:

We will be posting more of our thoughts, but as you can hear, our vision for these tools is that they:

  • Are able to run out-of-process. We view out of process tools as the preferred way to observe the runtime because it enables us to somewhat ignore the Heisenberg uncertainty principle. If we are profiler the browser, having to deal with NOT profiling the profiler code can be painful. Also, we want to be able to use the same tools on devices. I would much rather point my desktop tool to a Fennec device, compared to trying to use the tool on the phone itself! This leads us too…
  • Enable cross browser experiences: Our lab doesn’t have the resources to develop deep integrations with multiple browsers, but we very much want to enable that. Since we are running out-of-process, we can document the communication API and many hosts can then be wired up.

memorytool

The first experiment in this vein is a stand-alone memory tool prototype that lets you poke around in the JavaScript heap. What objects are there? How many of them are there? Any dangling references due to closures or event listeners?

To kick this off we worked with awesome Mozilla colleagues such as David Barron and Atul Varma which enabled us to spike down to the bare metal of the browser.

We ended up with an architecture for the tool that contains these components:

Firefox Add-on

A special Firefox add-on installs a binary component that gives us access to the low level JavaScript heap. This gives us a simple API with methods that allow you to enable profiling, get the root objects in the heap, and get detailed information on the objects themselves.

Firefox Memory Server

The current consumer of the core API is a min server. Once activated, the browser freezes and your only option to interact with it is via this server. It exposes a simple socket API with URLs mapping to the high level APIs. For example, you can access /gc-roots to get the root object ids. Or you can ask for details on an object via /objects/XXX where XXX is the object id you are inspecting. When you are done, you access /quit and the browser is unfrozen.

All of these APIs support JSONP which is how we get the data back into our main application.

NOTE: Currently, the server lives within the add-on itself (at chrome://jetpack/content/memory-profiler-server.html) but eventually this will migrated to a Jetpack.

Memory Tool Ajax Application

The main application itself is a simple Web application that can be run in any browser (not just Firefox!) After you have installed the Firefox Add-on, and turned on profiling via the Memory Server, you can visit the tool. Currently, after you connect, the tool gets a dump of the root object for the first tab in the browser (not including the memory server tab). You will see the meta data associated with the object, and you can click on any of the data elements that have their own memory id (memory locations are integers with 9 digits). This tree view lets you poke around the heap.

If you want to aggregate the data, you can click on the “2. Dump Heap” button, which goes through the entire heap (which can be big!) and aggregates all of the objects for you. If you see a massive number of objects of a particular type, this could be a flag!

Enough talk, lets see it briefly in action:

The tool is very early stage and changing constantly. However, it is all out in the open. You can grab the open source pieces:

As is always the case with Mozilla, and Mozilla Labs, we want to get ideas out into the community as soon as possible. This tool is very much alpha, and the goal of getting it out in the wild is to start a conversation about tools like these.

What tools in this area would help your job as a Web developer? We are all ears, and would like to share our dev tools mailing list / group as a good area to share ideas.

What about Firebug? This particular tool freezes the browser, and since Firebug is in-process right now, it wasn’t a great fit. However, we very much want to take this kind of work and get it into Firebug at some stage. We just aren’t at that stage yet!

On our side, we will be engaging with the Mozillans who truly grok the JavaScript (and entire browser) internals to see what interesting data we can expose to developers. We have found that the Firefox team has already added a lot of the infrastructure there, and now the task is to work out what will be useful, and how can we best report it.

We have plenty of ideas too. A wish list could contain:

  • Short term clean up (fix the backend code that interfaces with the heap, abstract out the service into a Jetpack, and make sure we are using the correct APIs, and get these APIs added where appropriate)
  • We want to visually add the graph to the object dump, so you can really understand what you are looking at. It will probably look something like this:

    memorytoolgraph

  • We have wired up Bespin, and we will suck out the source code from functions and showing that inline to the tool itself. There is much more to do though, and we want to find out what you need.
  • More profiling info: break up buckets of memory (images, js, DOM, etc)
  • Great way to see who is reference whom (memory leak detection)
  • Garbage Collection: When and how long are collections occuring?
  • Granular filtered profiling: Profile this event and measure every event-of-interest from the start of navigation to the present e.g. DNS & TCP connections, page header parsing, resource fetching, DOM parsing, reflow, etc.
  • Web Worker thread monitoring
  • Have a profiling mode that gives you data without having to freaze the heap, and only when you need to do a deep dive do we get to that.

We have learned a lot as we created this prototype. Atul is going to write up his experience, and we will continue to talk in the open about how we take this prototype and your ideas to the next level with browsers.

Update

Atul has posted on his experience with SpiderMonkey and how the JS Runtime works. Nice in depth stuff. He also created PyMonkey “a Python C extension module to expose the Mozilla SpiderMonkey engine to Python.” which is crazy cool.

Jul 16

When a “Web OS” hits, it will be so much more than a browser launcher!

Tech, Web Browsing with tags: 18 Comments »


original by mwboeckmann

Everyone got in a tizzy over the Google very-early-darn-leaks-pre announcement of Chrome OS. There have been many attempts at a “launch into browser” system, and the timing / marketing hasn’t been right. The journalists have by and large shown that they do not understand any nuance and could only think to write about the external battle of the titans (Chrome OS to destroy Windows!) or the internal battle of the titans (Android vs. Chrome OS).

The news is so early, that it is mainly a no-op right now, other than showing that to get to that point, Chrome will probably be extended quite a bit (access to more native services etc). I am a believer that this has to happen (hence Gears fan), but I also do worry that it will be rushed. We don’t want to fork the Web….. but let’s wait and see.

What I find most interesting though, is that I don’t think that the world needs a computer that boots almost-solely into a browser.

Kent Beck was talking about how he is using Chrome Browser OS right now as a social experiment. Yes. We can all delete every application from our machines and maximize a browser and live in it. That isn’t what will be exciting about a true Web platform.

I have been playing with a Windows laptop, and what has interested me is how much I can get done because my world is available through the browser. Back in the day, if I was at a friends house, I would download putty.exe and telnet/ssh into my world, and it would be ugly text. Now, I can jump on a random computer and access my entire social environment (email, twitter, etc). I can get real work done. One of the reasons that we did Bespin was to extend that to coding too.
This brings me to my benchmark for when I think a web OS will be here.

If I can sidle up to a random computer and have access to everything that I can do on my own laptop, then we have made it

Ironically, I almost used to be able to do just that! In university I could login to any machine on campus and see my screen exactly as I left it. I want X back baybee! ;)

We are getting closer, yet still a ways off. I hate the management that I have to do with iTunes. I want to by the license to play music, and have my collection in the cloud, and sync’d in smart ways. I want to be able to set profiles for what is downloaded and offline-available on my laptop versus the media server vs. the ball and chain’s laptop vs. my phone.

I want my settings to follow me around. Another reason why I am so excited about the future of Weave-like services. Let me login to the browser and get my history, passwords, awesomebar setup for me. Go further, and let me “switch user” on the persons machine and have the login be an identity service like Open ID, Facebook, Weave, or what have you.

When we have an open identity system that works, with services that let you take your entire world with you hooked to your identity, then we can talk about how cool the Web platform is as an OS. We will have moved up the services stack from managing the state of windows on the screen, to higher level services.

Marry this to auto syncing of data between all of your devices, and you have a truly new world. Give me that world, not just and autoexec.bat that launches browser.exe :)

Jul 08

Code Dimensions; How can we write code in more than 2D?

Bespin, Tech 7 Comments »

codedimensions

As I think about a lot of the features that excite me the most about Bespin, they tend to break up into features that connect people, and those that add more dimensions to the software development process.

Doing more with Time

When I look at the evolution of editors, we have been mostly stuck looking a files, with the odd perspective on top of that (e.g. show me class diagrams). We have used tools like VCS to be able to go to different points in time, but I haven’t seen a popular editor that does much more than that.

bespineditor_02_socialbar_090528b

One feature that I am excited about in Bespin, is the ability to have a “time machine” construct. I want to be able to flip around in time and see the code change before my eyes. On the timeline, I should be able data points such as: when commits happened, issues that track to the code, code size, who worked on it, etc.

I would also use this feature a lot casually. For example, to view a new commit that came in, I could simulate walking through what the developer did with that patch and grok it inline instead of staring at a huge diff. When you add the dimension of time to the tool in a deep way, I think developers will be able to add a lot of interesting features to help them visualize and produce great code.

Find Usages++

I wish I had better pivot tables for my code. We often make choices on how we compose our code modules, and there are always tradeoffs. Do you put your cross cutting concerns into the objects so when you look at one object you see it all? Or do you put the same things in a separate area so you can see “all the times I do X”. We run into this issue in spades with meta programming, where it can be hard to see everything that is going on.

Rather than having to make a choice, I want to pivot my code on the fly. I want to be able to ask my code:

  • Show me all of the data access logic that is used in this app
  • What are all of the URL mappings
  • Where is all of the keyboard handling
  • What are all of the public events that I could hook into?
  • What are all of the consumers of the event “foo”

I am interested to see if there is a way to easily get at my code in new ways, and also be able to make changes and have those changes go back to the right place. This is tricky…. but intrigues me.

Heuristics

Why am I not being told more about my code? It feels like I have to poll my tools all the time, and they don’t tell me much. Granted, I get help with syntax checking, incremental compilation, completion… great stuff. But, I want more.

I want to be told when I am duplicating a bit of code. I want to be told the instant I cause a regression in some tests. I want to be told the minute something I do messes up in a runtime (e.g. a browser). I want to be told the minute another developer on the team stepped on the same code (commit so she has to merge!).

There are a ton of heuristics that we can do on the client and up in the cloud (aside: fun little jap on cloud “#chromeos reinforces my belief that cloud computing is just mainframes with rounded corners.”)

This isn’t just about code, but also about the project lifecycle too. I need to write a separate post on that, and what is doing in that area.

Visualizations

I just happened across Code Canvas, a prototype zoomable UI for looking at a code project.

It is exciting to get time to think in the developer tools space. There is just SO MUCH that can be done to make development more fun and productive. By adding in low level hooks to multiple dimensions, I hope that we can do a lot more. What would you like to see?