Programatori.info

web programming blog

Archive for category JavaScript

JavaScriptMVC 3.0 Released. New Features and Standalone Subprojects.

Dec 6

Posted by Web Design CLuj in Front Page, JavaScript, WEB 2.0 | No Comments

Jupiter IT announced today the release of v3.0 of JavaScriptMVC, their OSS framework for enterprise-scale applications. The release encompasses a bevy of new features which touch on testing, Less and CoffeeScript support and enhanced documentation. The features/updates mentioned include:

  • FuncUnit – Web Testing Framework
  • Stand Alone Sub Projects – You can download only the tools you need
  • Multi-Page builds – Optimize builds across multiple pages
  • Less and CoffeeScript support – Use Less and CoffeeScript without having to refresh your page.
  • New Folder Structure – A revamped file structure that makes it easier to build modular applications.
  • Learn-ability – Much better docs, examples, demo, etc.

This new release also breaks out the framework allowing for individual subprojects which can be used independently instead of needing the whole framework. Each has their own github repo, documentation and support.

With 3.0, every part works standalone. So no matter the project, you can start benefitting from JavaScriptMVC’s goodies.

Big steps have been taken to improving the learning experience and getting developers up-to-speed. This includes:

JSMentors.com – The Mailing List to Learn JavaScript

Nov 29

Posted by Web Design CLuj in Front Page, JavaScript, WEB 2.0 | No Comments

There are a number of resources on the Internet for reading up on JavaScript but very few viable options for actually exchanging ideas with extremely knowledgeable JavaScript developers, especially when it comes to just wanting to know about JavaScript itself and not a specific JS library. This was a pain point I (Rey) personally felt when I wanted to learn more about the language and be able to have “mentors” that could help me better understand JS and ECMAScript.

After chatting a bit with JavaScript expert Asen Bozhilov about this, we decided to fill that hole by launching a new mailing list called JSMentors that allows developers to get to know the language and find the expert guidance in a friendly and professional environment. The list offers developers a place to:

  • Discuss ECMA-262 standard
  • Discuss different implementations of ECMA-262
  • Discuss different host environments of JavaScript
  • Discuss implementation of algorithms in JavaScript
  • Discuss your library design
  • Review your code
  • Review your book on JavaScript topic
  • Review your article on JavaScript topic

We also wanted to provide a list that was professional, courteous, and friendly to developers of all skill levels. Too many forums, newsgroups and lists look down on beginners or questions deemed too introductory and we wanted to ensure that JSMentors didn’t fall into that same hole. So we created a set of simple rules. Via the JSMentors mailing list you must not:

  • Insult other subscribers
  • Post racism
  • Spam publications

So far it’s been working great and developers are getting the mentoring that they desperately want and need. And the great thing is that the mentors are a who’s-who of the JavaScript world. Check out this list:

  • Garrett Smith
  • Juriy Zaytsev a.k.a. kangax
  • Dmitry A. Soshnikov
  • Steven Levithan
  • John-David Dalton
  • Stoyan Stefanov
  • Benjamin Rosseaux a.k.a. BeRo
  • Diego Perini
  • Angus Croll
  • Peter van der Zee
  • Christian C. Salvadó
  • Peter Michaux

One important thing to note is that the main focus of the list is the JavaScript language and while you can post about JavaScript libraries, you’re more likely to get a better answer in a library’s specific support forum or list than on JSMentors.com.

Asen and I would like to invite developers to join JSMentors.com and create a productive list to help everyone become better JavaScript developers and help push the web forward.

HTML5 forms validation in Firefox 4

Nov 12

Posted by Web Design CLuj in Firefox, Front Page, JavaScript, WEB 2.0 | No Comments

Mounir Lamouri looks at native browser-side form validation in Firefox4  – while re-iterating the need for re-validating on the server-side too. The objective of the browser-side form validation is to relieve JavaScript of the need to do a lot of basic form checking. Lanouri writes:

”All new input types introduced with HTML5 forms except search and tel benefit from internal validation.
Firefox 4 is going to support email and url and the validation will check if the value is a valid email or url respectively.”

Also discussed is added pattern matching support and a new pseudo-class that applies on submit controls when a form has an invalid element.

Adding fibers to your server side v8 diet offers efficiency and clarity

Oct 26

Posted by Web Design CLuj in Front Page, JavaScript, Library, WEB 2.0 | No Comments

In computer science, a fiber is a particularly lightweight thread of execution.

Like threads, fibers share address space. However, fibers use co-operative multitasking while threads use pre-emptive multitasking. Threads often depend on the kernel's thread scheduler to preempt a busy thread and resume another thread; fibers yield themselves to run another fiber while executing. The article on threads contains more on the distinction between threads and fibers.

Fibers describe essentially the same concept as coroutines. The distinction, if there is any, is that coroutines are a language-level construct, a form of control flow, while fibers are a systems-level construct, viewed as threads that happen not to run concurrently. Priority is contentious; fibers may be viewed as an implementation of coroutines, or as a substrate on which to implement coroutines.

The above is taken from Wikipedia, which is discussing the computer science concepts behind fibers.

Why do we bring this up? The Asana team (who we featured when they came out with LunaScript) continue their quest to make an ergonomic, productive, and performant framework for the Web.

Today they are discussing their patch to v8cgi that adds in support for their own fiber implementation.

It all ends up with this:

Few languages support fibers natively (though support was recently added to Ruby). We write most of our server code in JavaScript and run it under Google’s v8 engine, the same JS runtime that Chrome uses. Fortunately the v8 codebase is excellently structured, so we were able to add fiber support in just a few days. Our changes take the form of a patch (currently pending review) to v8cgi, a library of server-oriented extensions to v8.

Here’s a sample of the API:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // Make a new fiber. The fiber will run the provided function.
  3. var fiber = new Fiber('name', function() {
  4.  
  5.   // ...
  6.  
  7.   // Make another fiber runnable.
  8.   some_other_fiber.becomeRunnable();
  9.  
  10.   // Suspend the current one.
  11.   Fiber.current.suspend();
  12.  
  13.   // ...
  14. });
  15.  
  16. // Make the new fiber runnable. It won't start until the current fiber suspends
  17. // or joins.
  18. fiber.becomeRunnable();
  19.  
  20. // Wait for the fiber to finish.
  21. fiber.join();
  22.  

That’s almost the entire API. We don’t need any synchronization primitives because only one fiber runs at a time and control only changes when suspend() or join() is called.

There is a tension between writing clear, well-abstracted code and writing code that makes efficient use of the database. Adding fibers to v8 allowed us to resolve this tension. In taking a small amount of time to solve this problem “right” up front, we’ve made our entire engineering team more efficient for the long run.

Read the post to get the background, and to see the refactoring that is done to get to this place.

Asana seems to be really enjoying rethinking the world of Web frameworks. I can't wait to see their products!

Yo Yo, develop killer cross platform mobile Web apps with Jo

Oct 7

Posted by Web Design CLuj in Announcements, Framework, Front Page, JavaScript, Library, WEB 2.0 | No Comments

Dave Balmer (formerly YUI, currently working with me on webOS) has created a fantastic cross platform mobile Web framework called Jo. What do I mean by cross platform? webOS, iOS, Android, Symbian, Safari, Chrome, and even Dashboard Widgets. It's philosophy is:

If you want to jam an existing web page into an application framework, jo probably isn't for you. jo is designed to create applications. While it will play nicely with a mixture of new and old web development techniques, it uses HTML5 as a development stack and does not require direct DOM manipulation.

You can setup your views in JavaScript, or also declaratively using special tags:

PLAIN TEXT
HTML:
  1.  
  2. <jodialog>
  3.     <jofieldset>
  4.         <joinput></joinput>
  5.         <jobutton></jobutton>
  6.     </jofieldset>
  7. </jodialog>
  8.  

Take a look at the code and how it plays in action:

jQuery Data Binding, Templates, and Mobile: John Resig at FOWA

Oct 5

Posted by Web Design CLuj in Front Page, JavaScript, jQuery, WEB 2.0 | No Comments

Here's a live blog from jQuery creator John Resig's talk at FOWA, where he's giving us an update on the new toys from the jQuery team.

Data Link

jQuery already supports a data API:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. $("div").data("test", 5);
  3. $("div").data("test")===5;
  4. $("div").removeData();
  5.  

This is better than attaching data directly to data nodes for various reasons, e.g. storing non-string data and improving performance. And it also avoids memory leaks - when you remove an element, jQuery removes everything. Looking towards jQuery 1.4.3, the project had to decide if they want to remove data events, and they decided to keep them and make them more useful.

The new data linking plugin, developed in conjunction with Microsoft and released yesterday, supports binding between DOM objects and elements. Binding from an object to a form element looks like this:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var user = new User();
  3. $("form").link(user, {
  4.   firstName: "first-name",
  5.   lastName: "last-name",
  6. });
  7.  

Whenever "first-name" or "last-name" elements are updated, the form element is updated. You can also bind in the opposite direction, so that a form element changes when you change an object.

More info on GitHub.

Templating

Templating has become a big deal in Javascript, and there's now an official jQuery templating plugin, also released yesterday, which John tells me has a good chance of being integrated into the core at some point. John told me his original Micro-Templating library was considered at one point, but the new templating is more refined.

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. $("#test").append("<li><em>${name}</em></li>", "john");
  3.  

Pre-compiling template strings is possible too:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var data = { firstName: "John" };
  3. $("#item").tmp(data).appendTo("ul");
  4. <script id="item" type="text/html">
  5.   <li>$(firstName}</li>
  6. </script>
  7.  

The most interesting feature is that elements retain the data that made them - you can ask an element "what data did you come from"?

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var lastTemplateItem = $(".movieName:last").tmplItem();
  3. var movie = lastTemplateItem.data;
  4. var htmlNodes = lastTemplateItem.nodes;
  5.  

John argues that developers try to create too much abstraction between HTML and the data model. At least in the client, the DOM "is everywhere" and you should be okay with storing your data against it.

More info on GitHub.

jQuery Mobile

jQuery Mobile, under development, aims for broad mobile browser support, which also means a high regard for progressive enhancement. John explains the need to target multiple mobile browsers by focusing on BlackBerry. Why support BlackBerry? Among other things, BlackBerry mobile traffic is rising (he shows this stat of 10% growth in the past 12 months), your boss probably views your apps in it, and targeting one mobile browser is like targeting one desktop browser. (i.e. wrong.)

With most mobile browsers, there's a big problem: You can't do fixed positioning - John says it's just been added in Android 2.2, but not there in earlier Android, iPhone, etc. Some frameworks have done the complete simulation of scrolling to get around this, but it leads to massive amounts of code and doesn't work right - the subtle UI issues it causes are very noticeable.

Considering it unacceptable to simulate scrolling, jQuery Mboile always uses native scrolling. e.g. to show a select menu, it simply hides the rest of the page and makes the select list occupy the entire page.

There are toolbars available - user clicks to show and hide them, and it works nicely because it supports native scrolling. While you're scrolling, the toolbars are hidden, and they show again when the scroll action is complete (if they were cvisible before the scroll action began).

Developers can detect the various touch events:

taphold
tap
swipeleft
swiperight
swipe

Web Roundup

John finishes off with some highlights on the web in general:

Wolfenstein 3D… in 1K of JavaScript

Oct 5

Posted by Web Design CLuj in Front Page, Games, JavaScript, WEB 2.0 | No Comments

The JS1K conference wrapped up recently. One of the winners that jumped out at me recently was an implementation of Wolfenstein 3D.... in 1K of JavaScript:

The author mentions some of the features:

WOLF1K features a 32×32 map ( a 1024 cells grid ) with textured walls colored by orientation ( North, South, East, West ), fog, 3 transparent bitmap graphics in 8×8, 15 rainbow characters steering smoothly across the map, collision detection, probably the most crazy optimization tricks I ever wrote.

In order to get this into 1K some crazy things had to be done:

WOLF1K works exactly like the original Wolfenstein 3D and Wolf 5k. It is using the raycasting technique. The world is built from a uniform grid of walls and corridors. In order to draw the world, a single ray is traced for every column of screen pixels and a vertical slice of wall texture is selected, scaled and colored according to where in the world the ray hits a wall and how far it travels before doing so.

The sprites and graphics are stored in a small space using a clever trick:

The world of WOLF1K is a regular grid of 32×32 cells. Obviously storing these 1024 cells in one byte or one bit each is not feasible. It would use the 1024 bytes or 128 bytes if stored as bits. It actually is the result of a binary operation applied to the ASCII codes of the source code of WOLF1K plus a mural on each edge of the world.

[via Paul Kinlan]

RequireJS 0.14.2

Oct 5

Posted by Web Design CLuj in Front Page, JavaScript, WEB 2.0 | No Comments

James Burke has rapidly of late sequenced through a series of releases of RequireJS file and module loader for JavaScript - reaching Release 0.14.2 (mostly bug fixes) this week.

The software recently gained preliminary support for anonymous modules. Looking forward, Burke has posted a design sketch and code on GitHub  ("rough at the moment, mostly scaffolding," he writes) for a Node-based package tool. Further ahead he sees a RequireJS 1.0 release in the offing.  

He writes:

The code has been very usable for a few releases now, but I have kept the release numbers below 1.0 to indicate that the final mix of features were being worked out. With the changes in this release, it feels like the major format changes have landed.

Promote JS – give newbies a chance

Sep 26

Posted by Web Design CLuj in documentation, Front Page, JavaScript, learning, mdc, teaching, WEB 2.0 | No Comments

javascript on search

Do a search for JavaScript and you find a painful set of returns. The worst offender is having Java results show up. Ouch. (Remember: Java is to JavaScript as Ham is to Hamster!).

Compare to a search for Java, or C#, or Ruby, (or ....).

Ouch. We need better. To begin with the pirates of JSConf (lead by the awesome Mr. Chris Williams!) have started a grass roots Operation SEO at Promote JS. Go there, and help the cause by doing embeds like the following:

If we can do half of the work to promote this as we have with the awesome VaporJS library, then we should be in a better place.

Step 2: Come up with a fantastic landing area for JavaScript.

Editor's note: This was posted by Dion but he had no way to push it live. I am doing this now. To find out about my personal stance on this very cool idea, check out Why supporting promotejs is a good idea.