background preloader

Top 5 Considerations for Transitioning from Flex to HTML5 - Mindshare - Universal Mind

Top 5 Considerations for Transitioning from Flex to HTML5 - Mindshare - Universal Mind
The web application landscape has shifted rapidly in the past six months. Due to Adobe’s changing view of the Flash Platform, many companies who have relied on technologies like Flex are looking to migrate to HTML5. This transition can be tricky both for an organization as well as its developers. Here are five steps that should be some of the first an organization takes in this process: 1. Many developers will quickly become overwhelmed when examining the options for HTML5 web application frameworks. Within JavaScript you will find frameworks that differ greatly on each of these points. There are several key points to consider when making this decision for your organization: How documented is the framework? If your company is attempting to decide on an MVC architecture, I would recommend examining Backbone JS, Ember JS, Angular JS, and ExtJS / Sencha Touch. In addition, your team can augment the framework that you have chosen over time. 2. 3. 4. 5. Conclusion Related:  HTML

JavaScript Performance Best Practices This article gives valuable guidance for building faster web applications. The article is a collection of guidelines from various sources. Case study: Tips and tricks for improving JavaScript performance Tips & tricks in this article were collected from the developer experiences when creating an example application. Overview Source: Efficient JavaScript - ECMAScript First understand the big picture and the major component of the stack affecting the performance. Pick your battles. There are many interrelated components that play an instrumental role in the real-life web application performance such as those responsible for layout, rendering, parsing HTML, marshaling, DOM, CSS formatting, JavaScript -- as you see, JavaScript is only one part of the performance equation. The most expensive operations tend to be reflowing the layout and repainting. DOM access Interaction with the DOM is usually slower than normal JavaScript code. eval with for-in loops Core JavaScript pitfalls Slow: Faster: Faster:

Mobile ItemRenderer in ActionScript (Part 1) - AsFusion If you are starting to do mobile development and are used to create all your ItemRenderers in MXML, you may notice that the small devices like phones and tablets do not perform as well as the desktop does and you need to start looking closely to different ways to optimize you app. One of the ways to optimize your mobile app is to create your ItemRenderers in ActionScript. Narciso Jaramillo wrote a good article for Devnet with great tips for mobile development and one of the items was exactly that, to keep your ItemRenderers in pure ActionScript. Narciso mentions the Flex Framework comes with two ItemRenderers one is LabelItemRenderer that extends UIComponent and the other is IconItemRenderer that extends LabelItemRenderer. Those classes are great, but sometimes you have a different use case that needs a different set of classes. So in my examples I will not use those renderers. Basic Example Let's start with the most simple renderer, a TextField that displays some text. Application Styles

What is the current state of the art in HTML canvas JavaScript libraries and frameworks Meet Grunt: The Build Tool for JavaScript If you’re working on a large project, you’ll no doubt have a build script or a bunch of task scripts to help with some of the repetitive parts of the process. You might use Ant or Rake, depending on the language the project is written in. But what do you use if the project is primarily JavaScript? That’s the problem Ben Alman set out to solve when he created Grunt. What exactly is Grunt? Grunt is a task-based command line build tool for JavaScript projects. Here’s the idea: when working on a JavaScript project, there are a bunch of things you’ll want to do regularly. That’s what Grunt aims to be. For more Grunt intro goodness, see Ben’s post on his personal blog and the Bocoup blog. Grunt is built on Node.js, and it’s available as a package via the Node package manager (npm). You’ll notice it installs quite a few dependencies; there are other npm packages that Grunt uses. You’ll notice a lot of initial output. Keep going and fill in the rest of the fields.

Flex Mobile Development: skinning the ActionBar component One of the important pieces of the Flex framework for mobile development is the ActionBar class. This class lets you create an application title bar with three distinct areas. Starting from left to right you can have a navigation area, a title area, and an actions area. Why would you want to use this component? Here are two screen shots of the Facebook application running on Android and iOS that illustrates this idea: Using the ActionBar component Using the ActionBar component is quite easy. If you want to add them inside of a View here is how you do it: This code produces the following ActionBar: If you want to set it globally then the method differe slightly depending on what Application root tag you chose when creating the project (ViewNavigatorApplication or TabbedViewNavigatorApplication). And for TabbedViewNavigatorApplication you’d add one for each tab you have in your application. And here is how this code looks like at runtime: Understanding how the ActionBar component works

Five Tools for Managing Complexity in Large-Scale JavaScript Projects - Signals Blog JavaScript lacks many of the tools and culture that define a clear 'right way' to approach large-scale projects. Yet it's still possible to build and maintain complex software with JavaScript. But how? For the last year, I've been involved in the development of a chemical structure editor written in JavaScript. In the course of developing ChemWriter, we've experimented with many tools and approaches for managing complexity as the capabilities of the software increased. Google Closure. ChemWriter is a component consisting of over 14,000 lines of JavaScript code spread over 112 source files and 14 packages, and is backed by over 1,600 automated tests.

Important Considerations When Building Single Page Web Apps Single page web applications - or SPAs, as they are commonly referred to - are quickly becoming the de facto standard for web app development. The fact that a major part of the app runs inside a single web page makes it very interesting and appealing, and the accelerated growth of browser capabilities pushes us closer to the day, when all apps run entirely in the browser. Technically, most web pages already are SPAs; it's the complexity of a page that differentiates a web page from a web app. In my opinion, a page becomes an app when you incorporate workflows, CRUD operations, and state management around certain tasks. Let's start with this common understanding, and dive into some of the more important things that should be considered when building SPAs. There are numerous points to consider before building a new app; to make matters worse, the expansive web development landscape can be intimidating at the outset. I will expand on each of the points above in the following sections.

Tutorial: Styling the ActionBar The ActionBar appears at the top of your application when you use ViewNavigatorApplication or TabbedViewNavigatorApplication in your project. It’s a skin part in the ViewNavigator that updates as Views are pushed and popped. Since it’s built into the default ViewNavigatorSkin, you don’t normally create it on your own in MXML. Because it’s built in, styling the ActionBar a little less obvious. chromeColor ActionBar supports the chromeColor style introduced with Spark in Flex 4. titleAlign By default, the ActionBar title is left aligned. defaultButtonAppearance By default, the ActionBar uses flat-styled button skins for Buttons inside the navigationContent or actionContent of the application or view. The ActionBar has two built-in button styles that are controlled by the defaultButtonAppearance style. Using defaultButtonAppearance=”beveled” is a shortcut for setting several different style values besides the Button skinClass values. Advanced CSS Selectors Next Steps

Patterns For Large-Scale JavaScript Application Architecture Today we're going to discuss an effective set of patterns for large-scale JavaScript application architecture. The material is based on my talk of the same name, last presented at LondonJS and inspired by previous work by Nicholas Zakas. Who am I and why am I writing about this topic? I'm currently a JavaScript and UI developer at AOL helping to plan and write the front-end architecture to our next generation of client-facing applications. As these applications are both complex and often require an architecture that is scalable and highly-reusable, it's one of my responsibilities to ensure the patterns used to implement such applications are as sustainable as possible. I also consider myself something of a design pattern enthusiast (although there are far more knowledgeable experts on this topic than I). Can you summarize this article in 140 characters? In the event of you being short for time, here's the tweet-sized summary of this article: What exactly is a 'large' JavaScript application?

Styling Checkboxes and Radio Buttons With CSS and JavaScript This JavaScript and CSS will allow you to use custom images to style checkboxes, radio buttons and drop down menu select lists. Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily. The example This script is stand-alone and does not require jQuery or other library to work. View a more comprehensive example How does it work? In a nutshell, the JavaScript looks for every form element with class="styled" on it; hides the real form element; sticks a span tag with a CSS class on it next to the element; and, finally, mouse events are added to the span that handles the visual stages form inputs go through when they are clicked. Download the full script Download the CSS file To get the checkboxes, radio buttons and select boxes to work properly, you'll need to change three variables in the script: checkboxHeight, radioHeight and selectWidth on lines 21-23. The CSS The HTML Checkbox Radio button Select list Usage

Understanding Flex Mobile View and ViewNavigator The Flex framework “Hero” makes the task of creating mobile applications for BlackBerry Tablet OS, Android, and soon iOS extremely simple. I think that one of the best looking apps for Android is MAX Companion 2010 and please bear in mind that this app was created using an early build of Flex “Hero”. This is a reasonably complex application with lots of screens and social integration (Twitter) and yet on my Nexus One and Samsung Galaxy Tab it still works great. This is exactly where the Flex framework can shine on mobile devices: fast and easy development of applications that can connect to virtually anything (web services, REST services, RPC). In this article I will talk about Flex Mobile Views and ViewNavigator. If you want to use Flex “Hero” to create mobile apps you need to understand how these components work. Oh and one more thing, if you want to try this yourself you’ll need the Flash Builder “Burrito”. Screen Metaphor Flex Mobile Project Views and ViewNavigator ActionBar <?

webgl Create a Custom Select Box with jQuery In this tutorial I will be teaching you how to transform boring select boxes into well styled form elements that are perfect for custom web applications. Using custom form elements such as select boxes can give your website a unique feel and make it stand out from the crowd. By the end of the tutorial you will have a fully functioning custom select box. The HTML Code Firstly lets go over the HTML required for a normal select box. Now in order to create our custom select box we need to duplicate this HTML structure using div and span elements. In the normal select box the outer wrapper is a select tag this can be easily replicated by using a couple of div and span tags as below: As you can see we now have the first blocks of our select box. Next is the select options, these are to be placed after the selectArrow span tag like so: Each option is represented as a span tag which holds the value attribute and inner text like a normal option tag. Here is a shot of what we have so far: The CSS Code