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

Utilizing AJAX in Datatables- Effortlessly sharing a URL link to a designated page

I've recently encountered an issue while using Datatables and AJAX to retrieve data from my Rails server. The problem arises when I try to share a specific page (let's say page 2) with another user who is also using Datatables. Due to the paginat ...

javascriptruby-on-railsajaxdatatables

What is the best way to incorporate web components into a React Js project?

I am currently unfamiliar with web components. My main goal is to integrate Google Material Components into my React.js project. Google Material Web Component can be found here: https://github.com/material-components/material-components-web Is there a ...

htmlreactjscssmaterial-ui

Choosing multiple lists in Angular 2 can be achieved through a simple process

I am looking to create a functionality where, upon clicking on multiple lists, the color changes from grey to pink. Clicking again will revert the color back to grey. How can I achieve this using class binding? Below is the code snippet I have tried with ...

javascriptangulartypescript

Determining the most appropriate time to utilize the 'async' built-in function in ES2017 versus implementing 'npm i async' can depend on a variety of factors such

I recently discovered that async/await is a feature of ES2017, however, in some of my previous projects I had to use the package async to implement async/await functionality. Is there a simple way to determine when async can be used without importing it? ...

javascriptnode.jsasynchronousnpmasync-await

Exploring the capabilities of using Next.js with grpc-node

I am currently utilizing gRPC in my project, but I am encountering an issue when trying to initialize the service within a Next.js application. Objective: I aim to create the client service once in the application and utilize it in getServerSideProps (wit ...

javascripttypescriptnext.jsgrpcgrpc-node

Combining various arbitrary values, like :has in Tailwind, can be achieved by following these steps

I'm facing an issue where I need to hide an element if it has children. In regular CSS, this is achieved with the following code: &:not(:has(*)){ display: none } However, when trying to implement this in Tailwind, I'm struggling to figure ...

cssreactjstailwind-css

Function exported as default in Typescript

My current version of TypeScript is 1.6.2 and we compile it to ECMA 5. I am a beginner in TypeScript, so please bear with me. These are the imported library typings. The contents of redux-thunk.d.ts: declare module "redux-thunk" { import { Middle ...

javascripttypescriptdefault

Having trouble getting a jQuery variable to work as an argument in an onclick function for an HTML

success: function(jsonresponse) { data = JSON.stringify(jsonresponse); $.each(JSON.parse(data), function (index, item) { var Id=item.id; var JobId=item.JobId; var eachrow = "<tr>" + "<td>" + item.id + "</td>" ...

javascriptjqueryajaxhtmljson.net

What methods can be used to modify the appearance of the cursor depending on its position?

Is there a way to change the cursor to a left arrow when on the left half of the screen and switch it to a right arrow when on the right half, using JavaScript? I am trying to achieve something similar to what is shown on this website. I attempted to acco ...

javascripthtmlcss

Using Typescript to Import One Namespace into Another Namespace

Is it possible to export a namespace from one typescript .d.ts file and then import that namespace into another .d.ts file where it is utilized inside of a namespace? For instance: namespace_export.d.ts export namespace Foo { interface foo { ...

javascripttypescriptnamespaces

Is it possible to access the service and 'self' directly from the HTML template?

When working with Angular 6, one method to access component properties from a service is to pass 'self' to the service directly from the component. An example of this implementation is shown below: myComponent.ts public myButton; constructor(p ...

htmlangulartypescriptserviceself

Is it possible for me to convert my .ejs file to .html in order to make it compatible with Node.js and Express?

I have an index.html file and I wanted to link it to a twitter.ejs page. Unfortunately, my attempts were unsuccessful, and now I am considering changing the extension from ejs to html. However, this approach did not work either. Do .ejs files only work wit ...

javascripthtmlnode.jsexpress

Tips to stop automatic scrolling when tapping on a tab

Currently, I am encountering an issue with the tabs in my project. Whenever I click on a tab, the page scrolls down and I can't seem to figure out why. Below is the snippet of my HTML code: <ul class="list"> <li class="tab1 active"> ...

javascriptjqueryhtml

Understanding the implementation of options within dataTables that have been initialized with an aaData JavaScript array

When initializing my datatable, I used an aaData object and specific options like so: $('#dataTable').dataTable(dataTableObj, { "bPaginate": false, "bLengthChange": false, "bFilter": true, "bSort": false, "bInfo": false, ...

javascriptjqueryarraysdatatables

Animating with JQuery utilizing a dynamic attribute

We are facing a challenge with animating multiple divs that share the same class name and have different attribute values: <div class="chart-bar" style="width:10%;" bar-width="100%"></div> <div class="chart-bar" style="width:10%;" bar-wid ...

javascriptjquery

Combining various components within an inactive element tag using Vue

I am working on creating expandable rows for a table element using this HTML code snippet. The current approach involves alternating between parent rows and multiple rows within tbody elements. <tbody class="js-table-sections-header">Parent row</ ...

javascriptjqueryhtmlcssvue.js

How to Handle Jquery POST Data in Express Servers

Update Make sure to check out the approved solution provided below. I ended up fixing the issue by removing the line contentType: 'appliction/json', from my POST request. I'm facing a problem trying to send a string to Node.js/Express becau ...

javascriptjquerynode.jsexpresspost

Exploring JSONP data using AJAX

Tomorrow I have an exam on Web Design and I'm struggling to understand how to read JSONP responses with AJAX. While I can work with JSON and basic JSONP, I face issues when a callback function is involved. Let me illustrate this with two examples: F ...

jqueryhtmlajaxjsonp

The model in the Schema has not been registered, unlike other models from the same source that have been successfully registered

When populating a node express route with information from Schemas, I encountered an error that puzzles me. Even though I am referencing three different fields in the same Schema, I am only facing this error for one of those fields. The specific error mes ...

javascriptnode.jsmongodbexpressmongoose

Encountering a 404 error when translating URLs in Next.js i18n?

I am developing a multilingual service utilizing next-i18next. I wanted to have some of my routes translated as well, for example: EN: /contact => default language IT: /fa/ارتباط-با-ما => second language To achieve this, I utilized tran ...

javascriptnext.jsi18next