It is claimed a lot that whoever knows how to develop web applications is also ready to develop Windows 8.1 applications. And this is definitely true in terms of the language used. In this post we will explore how we can set our VS2013, Expression blend IDE and use specific frameworks in order to also work as fast as we do when developing Web applications.
First of all lets describe what we want today in our web development workflow:
- We need a way to write faster HTML by using some shorts of shortcuts that will enable us to free ourselves from all the "HTML" syntactic sugar. This is solved in VS2013 by installing the Web Essentials extension that comes equipped with "Zen Coding". "Zen Coding" will allow you to write ul>li*8, press tab and have it expanded to a fully blow unordered list with 8 list elements.
- We need a way to keep our CSS stylesheets DRY. The CSS language is not DRY ("Do not Repeat Yourself" principle). You tend to repeat the names of the selectors when you define their full paths, you cannot declare variables or define mathematical expressions in the calculation of the sizes and so on. SASS helps a lot in this process and you can use it in VS2013 by installing the Mindscape Web Workbench plugin.
- Automatic browser refresh is another important issue solved in VS2013 using the BrowserLink technology.
- Typescript or Coffescript support coming out of the box by installing the Typescript addon and the Mindscape Web Workbench or the Web Essentials extension.
So how do all those fit in the Windows8 development workflow. Can I take advantage of them?
The answer is yes provided that you follow some simple guidelines in order to make your life easier.
- Automatic browser refresh In the Windows8 development workflow, your browser equivalent is Expression blend. You will find yourself a lot of times annoyed by having to press the "Reload" button on blend whenever you make some change in an html-css file in VS2013. To avoid this and have this "automatic refresh" experience you need to go to Tools/Options/Project in Blend and enable the "Always reload files modified outside of Blend" option.
- We need a way to keep our CSS stylesheets DRY You want to use SASS but you usually perform all your CSS changes in Blend. Having enabled automatic reloads in the previous step you do not need to use Blend for editing your CSS files anymore. So having installed the Mindscape Web Workbench extension and using VS2013 to code in SASS, whenever you save, your css is created automatically and Blend is also automatically refreshed to reflect your changes.
- We need a way to write faster HTML. Zen coding works like a charm in Windows8 development (Web Essentials plugin) and therefore VS2013 is the "natural" place to write HTML for your Windows8 project. The only problem here is when Blend refreshes due to a change in an HTML file it looses its current state( meaning that if you used it to navigate to a specific part of you app and then started working in that state this state will be lost). Therefore the recommendation here is to use VS2013 for your "heavy-duty" HTML creation and then use Blend to perform smaller changes in the html file since changing those files in blend preserves the application's state.