Can applications on Windows 8 operate using JavaScript, HTML5, and CSS3 that adhere to industry standards?

As a .NET developer, I tuned in to the keynote for the Build Event in Anaheim, California and had some questions regarding the new support for creating Windows 8 applications using JavaScript, HTML5, and CSS3.

They showcased several examples and mentioned that the new Windows 8 marketplace was developed using these technologies. The idea of being able to program Windows apps (with direct access to .NET) using JavaScript along with C# is quite fascinating, especially for someone like me who primarily works as a web developer utilizing JavaScript, HTML5, and CSS3.

My main question revolves around whether the Windows 8 applications we build are compliant with web standards. Can we create Windows 8 apps and then easily launch them on the web? Will existing web applications be able to utilize some of the features demonstrated?

This advancement seems promising, particularly compared to the previous use of Silverlight which I have used for developing applications. Although I appreciate the functionality of blend when working with C#, replacing JavaScript in my current apps is not something I am considering.

Is this push towards getting "web" developers involved in Windows app development, or does it signify a cross-platform solution for building applications?

javascripthtmlcsscross-platformwindows-8

Answer №1

To clarify, the Javascript/HTML5/CSS3 windows programs operate on a different layer called WinRT (Windows Runtime) rather than .Net. The new Windows Metro style apps will be constructed on top of this layer instead of the older .Net. If your app makes use of the WinRT features, then Windows would be required to run the app. It is up to you whether or not you choose to incorporate those features into your app, depending on its purpose. It is possible to create an app that adheres to all standards and functions well on the system without utilizing any Microsoft-specific features. In this sense, it would be similar to a webpage that is launched as an app.

Additional points to consider:

  • Currently, MSIE uses some specific prefixes like -ms until those features are recognized by W3C and given official cross-browser names, similar to how we have -webkit-border-radius, -moz-border-radius, and border-radius.

  • HTML5 incorporates certain features such as grids that are not widely implemented in most browsers yet.

  • Microsoft provides various JavaScript libraries to facilitate app development, many of which are jQuery-based. Some of these libraries are designed specifically for Windows and it's unclear what the licensing restrictions are for using them elsewhere. Presumably, jQuery can be used across platforms, whereas the Windows-specific libraries may only be suitable for use within WinRT.

Answer №2

@Sarah

Let's talk about the unique challenges of developing a web app in HTML5 to run as a Metro application:

If your application is following best practices and not engaging in any questionable activities, then yes, it should work well within the restricted environment of a Metro app. In order to access external resources like websites within an HTML5/JS application, you will need to establish what is known as a "Web Context."

The Web Context provides the necessary internet access for your application while maintaining restrictions on accessing privileged resources such as Windows Runtime APIs.

For example, if you want to integrate a Bing Maps widget and obtain GPS data from the device, you would need to:

  1. Include an iframe within the page (defaulting to Local Context) to host a separate Web Context for the Bing Maps widget
  2. Utilize window.postMessage to communicate data between the Local Context and the Web Context contained in the iframe
  3. Use the Windows Runtime API to retrieve the GPS location data from the device within the Local Context

This approach ensures that no website loaded within the JS application can maliciously access Windows Runtime APIs to extract sensitive information. Adapting an existing web application to function in this manner may require rethinking how data flows between contexts, especially when dealing with potentially unsafe sources.

Answer №3

Simply put, apps created using the WinRT platform are not compatible with regular web browsers. However, it is uncertain whether a traditional HTML5 web application can function as a Metro app.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting every item's values into keys

Currently, my goal is to export all object values as keys specifically for a tree-shakable import system in a plugin I'm currently developing. The approach involves dynamically importing modules from various directories and subfolders, consolidating t ...

javascriptnode.jsecmascript-6es6-modules

Defining JSON Schema for an array containing tuples

Any assistance is greatly appreciated. I'm a newcomer to JSON and JSON schema. I attempted to create a JSON schema for an array of tuples but it's not validating multiple records like a loop for all similar types of tuples. Below is a JSON sampl ...

javascriptjsonjson.netjsonschema

Trigger submission issue encountered with Jquery in a dialog (modal) window

It's somewhat difficult for me to fully explain my problem. Nevertheless, I'll give it a go. In my HTML code, I have implemented several triggers using Jquery. Trigger 1 is responsible for validating specific items within a form. Once Trigger 1 ...

jqueryhtmltriggers

Permanent Solution for HTML Textbox Value Modification

I'm currently working on a GPS project where I am attempting to capture the altitude (above sea level) value in textbox1 and convert it into a ground level value displayed in textbox2. In this scenario, the GPS Altitude (ASL) value is dynamic. For ex ...

javascripthtml

javascript box is hidden to prevent displaying of values

I need the negative character to disappear when the user clicks the minus (-) button. The count should stop at 0. Currently, it is displaying characters like -1, -2, -3. I only want to show 0 or numbers greater than 0. <script type="text/javascript" ...

phpjavascripthtml

Here's a solution to prevent the "jump" effect when hiding elements in a navbar

Currently, I am facing an issue with my h5 elements within the navbar when scrolling. I am using Bootstrap 4 and jQuery for this project. The problem arises in my navbar where there are four sets containing an icon, followed by an "h5" and then a "p" elem ...

jquerycssbootstrap-4hideelement

Is there a way to keep my footer fixed to the bottom of the page in Google Chrome?

I recently made some updates to my aging website by adding a footer menu. However, I encountered an issue with the placement of the footer on Google Chrome. It appears too high, overlapping certain elements of the site. I attempted to resolve this problem ...

htmlcssgoogle-chrome

Updating the background color using typescript

Before transitioning to angular development, I had experience working with vanilla Javascript. I encountered a challenge when trying to modify the css properties of specific elements using Typescript. Unfortunately, the traditional approach used in Javascr ...

javascriptcssangulartypescript

Can you explain the distinctions among “assert”, “expect”, and “should” in the Chai framework?

Can you explain the variations between assert, expect, and should? How do you know when to utilize each one? assert.equal(3, '3', '== turns values into strings'); var foo = 'bar'; expect(foo).to.equal('bar' ...

javascriptmocha.jschai

AngularJS - UI Bootstrap: Easily expand or collapse all items in the Accordion widget

I have created a code to open and close all tabs of an accordion individually using separate 'open' and 'close' buttons. However, it requires me to dynamically add a key value pair (a Boolean value) to my JSON data. What is the best ap ...

javascriptangularjsjsonangular-ui-bootstrap

It seems that using the SVG <mask> tag is necessary for Firefox to display correctly, but it causes issues with CSS mask in

I need assistance with masking content using an external SVG image. Currently, I'm using the following code: #homepage-banner .desktop-slider.masked { -webkit-mask:url(news-panel-mask.svg) left top no-repeat; /* Chrome/Safari (Webkit) */ mask: ur ...

cssfirefoxsvgmask

Issues arising from the implementation of AJAX forms

Currently, I am working with Ruby on Rails 3.1.1 and using the jquery-rails 1.0.16 gem in my project. The issue I am facing involves utilizing a form with :remote => true. Within my view file, the form snippet looks like this: <%= form_for(@user, : ...

javascriptruby-on-railsajaxruby-on-rails-3forms

Changes are not being detected in new Angular 2 files

Currently, I am enhancing an Angular 2 project by incorporating new modules. However, the changes I made in these files are not being recognized within the project. I have attempted to research how change detection functions in Angular 2, but have not bee ...

javascriptangular

Malfunction in triggering events within an Ajax Magnific popup feature

I'm trying to load a page within a magnific popup using ajax: $("#operator").magnificPopup({ delegate: 'a.edit', mainClass: 'mfp-fade', closeBtnInside: true, removalDelay: 300, closeOnContentClick: false, t ...

javascriptjqueryajaxmagnific-popup

Bootstrap 3.2.0 Grid Column Creation Problem Identified

On my webpage using Bootstrap 3.2.0, I have a layout that includes dynamic column generation and content within those columns. However, I am facing an issue with this setup. Can anyone advise me on how to resolve it? Your help is greatly appreciated. ...

csstwitter-bootstraptwitter-bootstrap-3

Generate barcodes using Angular 2

Can anyone point me in the direction of an Angular 2 Barcode Generator capable of creating code 128 barcodes? I've been searching but haven't had any luck finding one. If you have any suggestions or can offer assistance, it would be greatly appr ...

javascriptangularbarcode

Obtain form data as an object in Vue when passed in as a slot

Currently, I am working on developing a wizard tool that allows users to create their own wizards in the following format: <wiz> <form> <page> <label /> <input /> </page> <page> <label /> ...

javascripttypescriptvue.js

AngularJS: Tips for bypassing filtering when inputting values outside of the range [1,2,3,4]

Is there a way to prevent filtering when entering certain numbers in the text box, like 0 or 5? <div ng-app=""> <input type="text" ng-model="search"> <div ng-repeat='val in [1,2, 3, 4] | filter:search'> {{val}} </div> ...

javascriptangularjs

Properties of the State Object in React Redux

I'm curious as to why my state todos were named todo instead of todos in the redux dev tools. Where did that name come from? There is no initial state, which makes me wonder. I'm currently following a Udemy course by Stephen Grider, but I am wor ...

javascriptreactjsreduxreact-redux

The passport authentication process is malfunctioning as there seems to be an issue with the _verify function

Having an issue and could use some assistance. I am currently implementing passport in my express application. While I am able to successfully register a user, I encounter an error when trying to log in. TypeError: this._verify is not a function at Str ...

javascriptnode.jsexpresspassport.js