Tag Archives: HTML5

Analyze the performance of your JavaScript Windows Store app

Applications published in the Windows Store must be fast and fluid, otherwise they won’t pass the certification because of the following requirement:

3.8 Your app must meet the basic performance criteria on a low-power computer
The app must launch in 5 seconds or less
The app must suspend in 2 seconds or less

Unfortunately the Windows Application Certification Kit is not enough the thoroughly test this requirement, because that tool runs only a few performance test. To test your JavaScript app, you can use the Performance Analyzer for HTML5 Apps tool from the Windows 8 SDK. After you install Visual Studio, this tool will be installed as well, but it won’t appear on the Start screen, so you have to start appperfanalyzer_js.exe manually from the C:\Program Files\Windows Kits\8.0\bin\<platform>\AppPerfAnalyzer folder.

This is the beautiful (?), modern (?) UI of the app (to get the full experience, click the image to see it in the original size):

appperf-start

Use the Please select an app to analyze to select your (or Microsoft’s Mosolygó arc) app, then click Let’s get started to start the analysis. By clicking the Advanced button, you can customize which tests you want to run:

appperf-advanced

The tool guides you through an 8-step wizard, giving you detailed instructions in every step:

appperf-step

You should take the given times seriously, otherwise the Analyzer won’t be able to collect enough data to analyze your app. The result is a HTML report with numbers and charts, which you can find in the C:\Users\<username>\AppData\Local\Microsoft\HTML5AppAnalyzer\Traces folder.

The following features of your app are analyzed:

  • Activation time
  • UI responsivemess
  • Layout passes
  • Synchronous XMLHttpRequest on UI thread
  • Image scaling
  • Memory footprint
  • Runtimer broker memory reference set
  • Memory leaks
  • Idle state CPU usage
  • Successful suspend
  • Memory reduction when suspended
  • App memory growth
  • Runtime broker memory growth

By using the HTML5 App Analyzer, you can learn a lot about the performance of your app, so you can occasionally run his tool regardless of the certification process. You can find performance best practices for JavaScript Windows Store apps here: http://msdn.microsoft.com/en-us/library/windows/apps/hh465194.aspx

 

HTML5 MIME types on IIS 8

If you have a website that uses HTML5 file types, and you run the site on IIS 7/7.5, you have to manually add the special file extensions in the IIS MIME Types list to make sure the webserver allows the clients to access them. You can add something like this to your web.config:

<staticContent>
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
  <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
  <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
  <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
  <mimeMap fileExtension=".webm" mimeType="video/webm" />
  <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
  <mimeMap fileExtension=".spx" mimeType="audio/ogg" />
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
  <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />
  <remove fileExtension=".eot" />
  <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
  <mimeMap fileExtension=".otf" mimeType="font/otf" />
  <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
</staticContent>

However, when you upgrade your server and move your site to IIS 8, then you’ll get a nice 500.19 Internal Server Error.

iis8-duplicate-mime-type

If you enable detailed error messages, you can see that the error is in the mimeMap section of the web.config file:

Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’ set to ‘.m4v’

The root of the problem is, that IIS 8 supports the most widely used MIME types out of the box, and they are registered at the server level, therefore all websites inherit them.

The solution is to get rid of the manual registration from your web.config file. In my case, I had to remove the following extensions:

mp4, m4v, m4a, ogv, oga, ogg, webm, spx, svg, svgz, otf, woff

Please don’t forget to update your installers and setup scripts!

 

Technorati-címkék: ,,

70-481 exam preparation materials

With the release of Windows 8, the Microsoft certifications are naturally changing. The first exam of the new MCSD: Windows Metro style Apps using HTML5 certification is 70-481: Essentials of Developing Windows Metro style Apps using HTML5 and JavaScript which is currently available as a beta exam. Since I couldn’t find a complete exam preparation guide, I’ve collected some links that point to sources related to the topics of this exam.

Starters:

If you plan to take your exam in October or later, you can also pre-order the Beginning Windows 8 Application Development book.

1. Design Metro style Apps (20%)

1.1. Design the UI layout and structure.
This objective may include but is not limited to: evaluate the conceptual design; decide how the UI will be composed; design for the inheritance and re-use of visual elements (e.g., styles, resources); design for accessibility; decide when custom controls are needed

1.2. Design for separation of concerns.
This objective may include but is not limited to: plan the logical layers of your solution to meet application requirements; design loosely coupled layers; incorporate WinMD components

1.3. Design and implement Process Lifetime Management (PLM).
This objective may include but is not limited to: choose a state management strategy; handle the suspend event (oncheckpoint); prepare for app termination; handle the onactivated event; check the ActivationKind and previous state

1.4. Plan for an application deployment.
This objective may include but is not limited to: plan a deployment based on Windows 8 Application certification requirements; prepare an app manifest (capabilities and declarations); sign an app; plan the requirements for an enterprise deployment

2. Develop Metro style Apps by Using WinRT (20%)

2.1. Access and display contacts.
This objective may include but is not limited to: call the ContactsPicker (windows.applicationmodel.contacts) class; filter which contacts to display; display a set number of contacts; create and modify contact information; select specific contact data

2.2. Design for charms and contracts.
This objective may include but is not limited to: choose the appropriate charms based on app requirements; design an application to be charm- and contract-aware; configure the application manifest for correct permissions

2.3. Implement search.
This objective may include but is not limited to: provide search suggestions using the SearchPane class; search and launch other apps; provide and constrain search within an app, including inside and outside of search charm; provide search result previews; implement activation from within search

2.4. Implement Share in an app.
This objective may include but is not limited to: use the DataTransferManager class to share data with other apps; accept sharing requests by implementing activation from within Share; limit the scope of sharing using the DataPackage object; implement in-app Share outside of Share charm

2.5. Manage application settings and preferences.
This objective may include but is not limited to: choose which application features are accessed in AppSettings; add entry points for AppSettings in the Settings window; create settings flyouts using the SettingsFlyout control; add settings options to SettingsFlyout; store and retrieve settings from the roaming app data store

3. Create the User Interface (21%)

3.1. Implement WinJS controls.
This objective may include but is not limited to: flipview; flyout; grid layout; list layout; menu object

3.2. Implement HTML layout controls.
This objective may include but is not limited to: implement layout controls to structure your layout; support scrolling and zooming with CSS3; manage text flow and presentation, including overflow

3.3. Create layout-aware apps to handle view states.
This objective may include but is not limited to: handle viewState events; choose among application view states; use CSS3 media queries to handle different view states; respond to ApplicationViewStateChangedEvent

3.4. Design and implement the app bar.
This objective may include but is not limited to: determine what to put on the app bar based on app requirements; style and position app bar items; design the placement of controls on the app bar; handle AppBar events

3.5. Apply CSS styling.
This objective may include but is not limited to: implement gradients, grid layouts, zooming, scroll snapping, and media queries

4. Program User Interaction (20%)

4.1. Manage input devices.
This objective may include but is not limited to: capture gesture library events; create custom gesture recognizers; listen to mouse events or touch gestures; manage Stylus input and inking; handle drag and drop events

4.2. Design and implement navigation in an app.
This objective may include but is not limited to: handle navigation events, check navigation properties, and call navigation functions by using the WinJS.Navigation namespace; design navigation to meet app requirements; Semantic Zoom; load HTML fragments

4.3. Create and manage tiles.
This objective may include but is not limited to: create and update tiles and tile contents; create and update badges (the TileUpdateManager class); respond to notification requests; choose an appropriate tile update schedule based on app requirements

4.4. Notify users by using toast.
This objective may include but is not limited to: enable an app for toast notifications; populate toast notifications with images and text by using the ToastUpdateManager; play sounds with toast notifications; respond to toast events; control toast duration

5. Manage Security and Data (19%)

5.1. Choose a data access strategy.
This objective may include but is not limited to: choose the appropriate data access strategy (file based; web service; remote storage, including Windows Azure storage) based on requirements

5.2. Retrieve data remotely.
This objective may include but is not limited to: use XHR to retrieve web services; set appropriate HTTP verb for REST; handle progress of data requests; consume SOAP/WCF services; use WebSockets for bidirectional communication

5.3. Implement data binding.
This objective may include but is not limited to: choose and implement data-bound controls, including WinJS.UI.ListView, to meet requirements; bind data to item templates such as WinJS.Binding.Template; bind data to controls by using data-win-control and data-win-bind; configure an iterator with data-win-options; enable filtering, sorting, and grouping data in the user interface

5.4. Manage Windows Authentication and Authorization.
This objective may include but is not limited to: retrieve a user’s roles or claims; store and retrieve credentials by using the PasswordVault class; implement the CredentialPicker class

5.5. Manage Web Authentication.
This objective may include but is not limited to: use the Windows.Security.Authentication.Web namespace; set up OAuth2 for authentication; CredentialPicker; set up single sign-on (SSO); implement credential roaming; implement the WebAuthenticationBroker class

If you are aware of any other useful resource, please share its link here!

 

Technorati-címkék: ,,