WinJS: The Windows Library for JavaScript

https://dev.windows.com/en-us/develop/winjs

by axelfontaine • 11 years ago

57 47 11 years ago

dev.windows.com

mc_hammer• 11 years ago

what i would have loved 10 years ago was a jquery for windows, $('#32770').find('OK').click().. not sure if thats relevant still

anyway on win JS, have an upvote, but my advice is to stop extending html into some javascript/xml hybrid.

i think a functional approach there would be really sweet

    <div data-ref="listview1">
      <button>1</button>
      <button>2</button>
      ........
    </div>
    
    winJS('listview1').all('button').onclick(dostuff)

lets extract the logic from the view, so its way more easy to maintain than

    <div class="button-well">
                <button data-win-bind="onclick: changeSelectionMode">ReadOnly</button>
                <button data-win-bind="onclick: changeSelectionMode">Single</button>
                <button data-win-bind="onclick: changeSelectionMode">Extended</button>
                <button data-win-bind="onclick: changeSelectionMode">Multi</button>
            </div>

also when you create a control on the fly you can see the difference in keystrokes:

     $('body').append('<button>').onclick(dostuff)
     //versus
     body.innerHTML += '<button data-win-bind="onclick: changeslelectionmode">'; initBinds();

can you actually make native controls in win10 or windows mobile with this? that would be really cool also.

Aleman3604• 11 years ago

Yes, you can make native-looking Universal Windows Apps with WinJS, distributed through the Store. They can call the same Windows Runtime API's as C++ or C# can. Many of Microsoft's built-in apps use WinJS.

XAML provides the declarative approach that you're suggesting, and was available ~10 years ago.

smacktoward3• 11 years ago

IBM actually had a research project back in 2000-2001 that worked this way, called "Sash": http://www.ibm.com/developerworks/library/it-0701art3/

I played with it a bit at the time and was amazed it never took off. Probably it was just too far ahead of its time; JavaScript was still stuck in its "oh, that's what you use to make icons dance on crappy web pages" bad-reputation era.

_a7gd• 11 years ago

The jQuery for windows that I found to have worked is AutoHotKey. But the syntax is something out of a morse code book:

    #IfWinActive ahk_class LWJGL
    {
        *^=::
        {
            SendInput t
            Sleep 150
            SendInput %macro1%{enter}
            return
        }
    }

This sends commands to a minecraft window (LWJGL is somehow what windows sees.)

chadzawistowski2• 11 years ago

I find AutoIt's BASIC-like syntax is a little nicer for complex tasks than AutoHotKey, although AutoItX (usable from C++, VB, C#, F#, and other managed languages) is the nicest to use of all.

OldSchoolJohnny• 11 years ago

Why do so many links on HN to new tech go to a page that doesn't fundamentally explain what it is right at the top?

What is this? Is it a way to access the windows api from javascript? Is it a library of web UI components like Telerik?

So many projects seem to suffer from this same problem, just say what you are doing in clear unambiguous short sentences right at the top with an example or a picture and the world would be a much better place.

smacktoward3• 11 years ago

You may have to scroll a little, but under "Advantages of WinJS" it has a decent description:

Use WinJS to build first class apps with HTML, CSS, and JavaScript. You can use WinJS not only for your Universal Windows apps using HTML/JS, but also for your websites, and when using HTML-based app technologies like Apache Cordova. WinJS provides high quality infrastructure like page controls, promises, and data-binding; polished UI features like virtualizing collections; and high performance Windows controls such as ListView, FlipView, and Semantic Zoom. This is a comprehensive toolkit for you to use with confidence in its performance and polish, whether as a standalone solution or with other frameworks and libraries.

Roboprog3• 11 years ago

So.... (marketing speak) HTML/CSS/Javascript ... make view component thingies ...

???

T-A2• 11 years ago

This should perhaps be more prominently displayed: http://try.buildwinjs.com/

Roboprog3• 11 years ago

Thanks. If I'm reading this correctly, it looks somewhat like an Angular competitor, subbing in "data-win-star" for "ng-star" attributes in your HTML elements.

... or not: some of the other comments suggest that the source data for these views is MS-specific. OK, I should have expected that :-(

nekitamo4• 11 years ago

Kind of lame how you can't use any of this, or even open it in Visual Studio, unless you have Windows 8.1 installed.

sudioStudio644• 11 years ago

When you say you can't open it in anything but Windows 8.1...why would that be the case? There are project files for sublime and vs2013 on github...it's just javascript.

nekitamo4• 11 years ago

When you try to open the Visual Studio project files, it gives you an error that you need Windows 8.1 installed. That's lame.

I'm aware I can open the .js files in a text editor, but that's like saying I could work on a C# project by just editing the .cs files in a text editor. Sure that's possible... but I would rather use the IDE.

ocdtrekkie3• 11 years ago

"It's kinda lame you need an OS made in the last six years at least to run this."

Isn't this kind of like asking why Docker doesn't run on a Linux kernel from 2009? Windows 7 is six years old, don't be shocked some of Microsoft's newer things might use newer platforms.

Guess it's good they're giving folks a free upgrade.

nekitamo4• 11 years ago

Microsoft's big selling point is backwards compatibility with their older OS. Furthermore, according to this source Windows 7 still makes up for the vast majority of Windows installs on consumer desktop computers:

http://www.netmarketshare.com/operating-system-market-share....

So it's lame that they're releasing software that doesn't work for the majority of their users, because they're trying to shove Windows 8 down people's throats, which is quite frankly terrible user experience.

megaman222• 11 years ago

Cool, I guess. I'm not sure I see any point in writing native windows apps in Javascript when you've got a much better language in C#.

smacktoward3• 11 years ago

Other than there being a lot of people who already know JavaScript but don't know C#.

iLoch• 11 years ago

I think this argument could have been made with Nodejs and React Native, but we've seen how those worked out.

frederickf• 11 years ago

One advantage might be the ability to support multiple platforms. Using the technology group formerly knows as the "web stack" you could build a version of your app for windows desktop, ubuntu desktop, browser apps, mobile, and probably others.

Aleman3604• 11 years ago

Gives you options. If you have an existing web app, you can likely reuse the bulk of it to quickly get a Windows app.

benaston• 11 years ago

"when you've got a much better language in C#"

That's subjective.

cwbrandsma• 11 years ago

C# can accurately subtract decimal numbers without having to invoke a webservice or use a third-party library. I'd call that better.

(Note: I spend most of my time writing JS, but am extremely familiar with C# and Java)

M82• 11 years ago

It's not subjective. JS is only relevant due to ubiquity. Nobody transpiles to C#. (well, except for Haxe - to nitpick, but it also transpiles to Java and C++).

sudioStudio644• 11 years ago

The thing they are doing in 10 where you can publish a regular website in the store is pretty cool, though.

You include some js and a manifest and your site detects if it's running in a store container and gives you access to the device...camera, disk, tpm. That's pretty cool.

I wonder how secure something like that can ever be...but its a neat idea.

asyncwords• 11 years ago

For those that are curious about this, sudioStudio64 is talking about "Project Westminster", which is one of the four "Universal Windows Platform bridges". The other three let you essentially port Android, iOS and Win32 apps to the new UWP platform and app store.

https://dev.windows.com/en-us/uwp-bridges

sudioStudio644• 11 years ago

Ahhh. Thanks! Very cool of you to drop the link!

Nemcue2• 11 years ago

Gah. I thought this was a library to do Automation in Windows using Javascript. That would have been a dream compared to what the Windows ecosystem currently has.

Autohotkey et.al are impressive in terms of functionality, but holy hell is the syntax and structure awful.

Aleman3604• 11 years ago

http://uiautomation.codeplex.com/

Let's you do UI automation in PowerShell. This example starts calc.exe and clicks buttons 1, 2, 3:

    Start-Process calc -PassThru | Get-UIAWindow | Get-UIAButton -Name [1-3] | Invoke-UIAButtonClick;

nextw33k• 11 years ago

My problem with PowerShell is that its Yet Another Syntax To Learn (YASTL).

If a JavaScript runtime like nodejs had access to the same interfaces as PowerShell or to COM I'd be over the moon.

It would be very powerful, you'd effectively be opening up windows shell programming (OS scripting) to tens of millions of developers rather than the 1% that take the time to learn PowerShell.

chadzawistowski2• 11 years ago

Autohotkey's syntax is expedient for keybindings, but I agree it's pretty awful for nontrivial automation. I find AutoIt3 better for complex automation, but it still lacks features from general-purpose languages.

Your best bet for Windows automation might be AutoItX, a DLL/COM control that can be used from C++, C#, or other managed languages such as F#.

jasim• 11 years ago

Here's a code snippet from the website:

    <div class="listView win-selectionstylefilled"
         data-win-control="WinJS.UI.ListView"
         data-win-options="{
                    itemDataSource: Sample.ListView.data.dataSource,
                    itemTemplate: select('.smallListIconTextTemplate'),
                    header: select('.header'),
                    selectionMode: 'none',
                    tapBehavior: 'none',
                    layout: { type: WinJS.UI.ListLayout }
            }">
    </div>

The ListView control looks quite powerful, but unfortunately that power comes at the cost of learning a new templating language and all its quirks. Where is the `select` method defined? Is it user accessible Javascript, or is it hidden deep inside the library? What if I wanted to capitalize my headers - would `data-win-options` evaluate Javascript? If it does, what is its binding? Does it use a custom expression parser? If so, what are its quirks? How do I create a reusable component out of this? How would I parameterize it?

There are a few custom tags here: 'data-win-control', 'data-win-options' and 'data-win-bind'. How many others are there, and how much time would I have to spend in their API docs to grok them?

Having worked with ERB, HAML, and Angular extensively, and after dabbling with Mustache, and thus relearning a different way to do the same thing over and over, it has become apparent to me that templating languages ought to do string interpolation and stop at that and leave the programming part to a programming language.

mako-taco• 11 years ago

I went to the 'try it out' page here http://try.buildwinjs.com/#listviewinteractions

and noticed a ton of jank while scrolling. A quick look at chrome's timeline reveals a nasty listener leak. Hopefully, it's user error and not a flaw in the library.

WinJS: The Windows Library for JavaScript

Related Stories