Win8探索学习笔记(2)基于JS的metro程序基础
Summary：MS的getting started简单介绍了如何使用各种方法来创建metro程序。这里，只试图看看MS是如何支持JS的metro程序的。
(1) Metro程序支持的开发方式和语言
对于Metro风格应用开发，可以使用JS实现程序逻辑，结合HTML5/CSS3设计用户接口；也可以使用c++，c#或VB结合XAML来实现用户接口，使用native c++或托管c#或VB来实现应用程序逻辑。对于Metro风格的C++游戏，可以使用native c++的DX11库和HLSL等。
对于Win8，本地扩展允许用户构建可重用的组件库，可以使用C++、C#或VB构建组件，然后使用JS或者其它的支持的语言在程序中调用这些组件。
(2) 下面是Win8提供的VS11预览版对Metro支持的工程选项
(3) 使用JS实现的hello,metro
实现hello,metro很简单了，用VS 11新建一个最简单的JavaScript工程，默认的工程模板如下：
简单分析一下，这里有css文件夹、images文件夹、js文件夹、winjs文件夹和default.html和一个manifest文件。其实，和一般的web程序是一样的，default.html是“起始页”，css和images和js文件夹是对应的一些引用的文件了。winjs文件夹，重点说明一下，是win8为基于JS的metro程序创建的一个JS库吧，暂且理解这么多。然后package.appxmanifest，对于开发人员都很熟悉了，打包用的一个列表文件，在VS中，双击打开可以使用UI的方式编辑了。打开default.html，里面其实就是对其它的css/js文件的一些引用了，就是提供了一个简单的模板工程了。
到了这里，我已经大概猜测到了，基于JS的metro程序最后还是打包一下，放到一个“虚拟机"/"runtime"上去跑而已，原本以为MS会把JS编译到二进制，成为native程序的，下面会进一步证明这一点。
简化上面的工程，删除css、js、和winjs文件夹，最后只剩下images、default.html、package.appxmanifest的内容。事实上，这才是一个”最简单“的基于JS的metro工程。default.html内容如下：
<!DOCTYPE html> <html> <head> <title>Hello,metro </title> </head> <body> <button> Hello, Metro with JS! </button> <p> This is an metro app implemented by JS! </p> </body> </html>然后，使用VS的start without debuging运行就可以切换到metro界面运行这个程序了。
发现几个问题：
1. 不支持JS中的部分内容，比如alert这么常用的东西没支持，需要使用winJS里面的一些东西去实现吧，参考http://social.msdn.microsoft.com/Forums/zh-SG/winappswithhtml5/thread/dbdabf29-206d-4d93-a491-b5e8fcd6a920提到了这个问题。
function alert(theMessage) {
Windows.UI.Popups.MessageDialog(theMessage).showAsync().then();
}
function doingSomethingAndWantToShowAnAlert() {
alert("Hello Nurse");
}
2. VS11的智能提示有些问题，比如上面的这个JS的实现的那个Windows....就没有任何提示，完全手写的。
3. 用VS运行之后，回到desktop的VS中之后，再次用VS无法运行程序（编译没有错误，问题在于运行），提示”神马文件被其它神马打开神马的"，一看就知道文件正在被使用，非要我用任务管理器kill掉metro程序的进程后才能用VS再次启动。PS：要是这样，别人边写程序边测试不是要麻烦死了，跑一次就要用一下任务管理器。
4. 上面这样一个简单的metro程序，占用的内存居然可以到10M以上，即使是到desktop中，进程处于suspended状态，依然不变。PS：个人对内存占用倒是没有太多了解，也不知道这是不是算正常，但是，不是说win8对内存管理怎么怎么优化神马的嘛。
5. 对于上面基于JS的metro程序，在任务管理器中，右键，go to details，发现，这里的details中，发现到了一个WWAHost.exe的进程，所有的自己写的基于JS的metro程序最后都对应到一个名字为WWAHost.exe的进程上。运行了一下系统自带的metro程序，部分程序并不是对应到WWAHost.exe的，比如IE（对应的还是IE），部分系统自带的会对应到WWAHost.exe上，比如那个天气程序（其可能就是基于JS写的了）。到此，更加大胆的猜测：这个WWAHost.exe才是这些基于JS的metro程序的"虚拟机"，再次让我看到了所谓的基于JS的metro程序是native的应该是不会的了。至于更多，期待有高手去研究，我不是砖家。
(4) 分析基于JS的metro程序
上面已经大概试了一下基于JS的metro程序。下面继续分析。
1. 工程的projects->properties
看看JS Metro工程的projects->properties，看看有没有什么配置选项，发现，几乎什么也没有，再次看到它和web的相同之处了，所以继续大胆猜测，对于JS Metro程序，其没有所谓的”编译、链接“的概念，就是一个”打包“的过程吧，然后原封不动的丢给一个"runtime”（我喜欢也称之为“虚拟机”）去执行，就像HTML/JS/CSS运行于IE这个"runtime/虚拟机"一样，所以说，哪里来的native！
2. VS 11对于JS Metro程序的错误机制
为了再次看看VS 11对于html/js的处理，看看它能不能检查”错误"。随便在html里面弄点乱七八糟的，或者弄点“错误”的JS，比如<script>test()</script>，用VS build一下，都是不会有错误的，说明VS 11没有“静态”查错的能力，用debug运行，是可以查到这些错误的。类似于Chrome的开发者工具的功能了，可见，其实基于JS的metro就是把html给runtime去解析的，类似于web在浏览器中运行一样，所以，自然效率上，你懂的。
PS：之所以我一直在分析JS Metro到底会不会native的跑，并不是说这个用runtime去跑html是不行的，而是想看看MS到底有没有新的东西，弄一个runtime去跑HTML，早已经不是新东西了，那些基于webkit的Mobile上的”客户端“程序都是这么个原理，真心想看到有没有办法把JS真的”编译“为native去跑，当然，这样可能或许真的很难。
3. Build和Deploy
既然没有“编译、链接”这些，那就看看Build菜单下有什么吧：Build和Deploy。
我想，build应该就是打包的过程，deploy就是部署了。PS：实在不得不让我想起了android工程，要说更类似的，让我想起了WAC程序，打包一下，部署一下，丢给runtime去跑HTML/JS/CSS，这样的东西在HTML5被“炒作”的今天，实在太多了！既然这样，那就来看看VS是如何打包和部署的吧。
先看看用Build能得到一些什么：
在工程目录下，有一个bld文件夹和Debug文件夹。删除之后build还是会生成的。至于bld里面的内容，暂且不去细细研究了，用记事本打开看看，估计就是一些中间文件了（工程的manifest配置中，有一个配置Package Name的，是一串ba6a209b-2b36-4a5e-a4d8-c122dce439e0这样的玩意，在bld里面的子文件夹的名字就是这个package name）。然后就是debug文件夹，里面生成的是一个xml、一个appxrecipe（也是xml）、一个prj文件，两个xml都是一些配置信息吧。VS Build之后就是得到这些文件。
那么Deploy呢：
Build之后Deploy会生成什么呢？试试就知道了，先在Start界面上卸载掉这个程序，然后build后发现start界面上不会有这个程序，Deploy之后，程序就会出现在start界面上了。那么VS到底是部署了些什么内容呢（部署后，删除VS工程肯定也是可以运行程序的）？
经过查找，VS中Deploy的Metro程序都到了C:\Users\<user name>\AppxLayouts中，其中以程序的package name为文件夹组织的。其中部署的一些文件，里面就有工程的default.html，这样，居然部署之后还可以看到程序源代码，可见其很可能就是打个包，然后丢给“隐藏的IE“("runtime")去解析运行了。那么，这些文件是不是都是运行必须的呢？试着删除一下，发现只有resource.prj文件是无法删除的（只有去start界面uninstall后才可以删除），删除其余所有文件后，程序还是可以正常运行的，可见resource.prj里面就包含了所有运行需要的内容了（html/js/css/images等），至于这些其余的被删除的文件有什么用，可能有些跟管理程序升级什么的有关吧。
说明：这个部署后的程序出现在start界面上，这个start界面上的信息是在哪里保存的，或者说它怎么知道如何来启动这个resource.prj文件，相信在某一个角落（应该是注册表）中保存有这些信息，比如弄一个地方保存start界面上的所有应用程序的列表，对于每一个程序，有一个属性，对于JS Metro程序，弄一个属性叫"JS Metro"和一个属性指定程序对应的文件的位置，然后启动的时候根据这个就知道该如何启动了，是启动desktop的程序（desktop程序也可以出现在start界面上，参考前一篇），还是启动JS Metro，或是启动其它类型的，总之，一切都是猜测，具体，这个信息在哪里，暂时没有兴趣去找了。）
4. 关于程序的打包Package
这次打包才是真的打包了，到这里，一个自然的问题是，上面的程序可以build和deploy。那么如果要把程序给别人，到别人的电脑上去运行呢？
MS引进了store的模式，具体这个store貌似还没有建立起来，在VS的store菜单下，有一些内容，比如打包程序(Create App Package)，其它的就是一些需要store帐号的东西吧，还有什么上传到store什么的。这里就说说打包了。用Create App Pakage之后，在工程下会生成一个Packages文件夹。主要的文件就是：一个bat文件，一个安装脚本；一个appx文件，可以理解为打包的文件了；一个cer文件，可能跟认证什么的有关。只需要运行一个bat文件，就可以在自己的电脑上安装了。（PS：我选择的是只在本地机器使用，所以肯定是没有问题的，至于能不能弄到别的机器上去运行，或者说会不会必须通过MS store上传下载，就不清楚了，总之，这模式应该跟app store很类似了）。通过这样的方式，安装之后就可以在start界面上看到程序了，但是这个程序总该有一些”安装文件“吧，本以为也会在Deploy的AppxLayouts文件夹下，事实上，不在。那在哪里呢。。。。实在不想去找了，MS就知道跟我们玩神秘，偶然发现，那个C:\ProgramData\Microsoft\Windows的目录下的AppRepository文件夹的更新时间就是我install和uninstall的时间，也就是说，很可能就是保存在这里面的。MS又跟我玩神秘，这个文件夹居然打不开，当然，肯定是权限问题，不过这个也不知道弄了个神马权限，反正我打不开。
总结：由于我不是砖家，上面的内容可能有点罗嗦，也很简单，因为我也是一下午在这里坐着，想到了什么就先试试，然后马上记录一下内心所想，多么希望能看到MS一点创新的东西，但是实在没有看到，除了界面上弄了一个Metro Style，本质上是没有创新的，包括其store的模式。当然，这里只是一个基于JS的Metro的程序，基于其它的语言的Metro程序某些地方肯定是和上面的类似的，但是某些可能会不一样。（比如，上面的html/css/js我觉得应该是运行在IE的内核的一个runtime上，就像很多Mobile上的html运行在webkit的runtime上一样，但是基于c++的可能是可以得到一个exe可执行文件，然后native执行的，具体暂时不清楚了）。至于程序怎么写，WinJS怎么用，这些就不该是大问题了，web该怎么弄还是怎么弄。最后，metro界面还是不错的，就是希望真正的win8出来的时候，不要把desktop界面和metro界面杂交，metro用在PC上是在不必要，也很丑陋。