Windows8.1 html5 dev paradigm discussion netponto
-
Upload
alexandre-marreiros -
Category
Technology
-
view
4.404 -
download
0
description
Transcript of Windows8.1 html5 dev paradigm discussion netponto
Windows 8.1 with HTML5/JSAlexandre Marreiros
http://netponto.org
hashtag #netponto
44ª Reunião Presencial @ LISBOADateTime.Parse(“18-01-2014", new CultureInfo("pt-PT"));
About / ContactWho
– CTO @ Innovagency– Software Dev/Arch as Independent– Technical Trainer and Speaker as Independent– Technical Writer– UX Consultant– Lecturer@ EDIT
Contact– [email protected]– @alexmarreiros– Digitalmindignition.com
Alexandre Marreiros
Agenda– Windows 8.1 Platform / API – Windows 8.1 Tech view HTML 5 vs XAML– Windows 8.1 And Windows Phone 8– Windows 8.1 Tech view HTML
Windows 8.1 Store Apps
Windows 8.1 APIS
Windows 8.1 APIS
http://msdn.microsoft.com/en-us/library/windows/apps/bg182410.aspx
Windows 8.1 Store Apps Platform
Windows 8.1 & Windows Phone 8
http://www.bubblews.com/news/1730683-microsoft-to-combine-their-windows-8-and-windows-phone-app-stores
Windows 8.1 & Windows Phone 8
MSDN Magazine
Windows 8.1 & Windows Phone 8
Windows 8.1 & Windows Phone 8Sharing technique When to use
Separate UI and app logic using the Model-View-ViewModel pattern
This guidance is applicable to many app types, but particularly to apps that have a XAML UI. Separation allows you to write the app logic and to concentrate on user experience design separately. An added benefit is that your app logic is more likely to be common for your app on both platforms, and therefore is a great candidate for code sharing using the rest of the techniques described here. Model-View-ViewModel (MVVM) is a great way to achieve this separation.
Share functionality using Portable Class Libraries Windows Phone 8 and Windows 8 share the same .NET Framework engine. In a XAML app, most of your app logic will be written in managed code. If you are using the MVVM design pattern, you have the potential to share your viewmodel and potentially your model. Note that Portable Class Libraries are a .NET Framework concept and don’t support C++.
Share code with Add as Link Use this technique for code that is non-portable and therefore can’t be implemented in a Portable Class Library. For example, Windows Phone 8 and Windows 8 can use the common Windows Runtime API surface to harness the power of each platform for networking, proximity, in-app purchase, and many other features. Portable Class Libraries don’t support Windows Runtime API. Instead, you can abstract this non-portable code, which is common to both platforms, into a class that can be shared using Add as Link in Visual Studio. In C++ projects files are added to projects as linked files by default.
Share using Windows Runtime Components In addition to consuming the common Windows Runtime API available on both platforms, you can write your own Windows Runtime Component to make your functionality available in all supported languages. This can be written in C++ and consumed by C# or VB. This is a very useful technique for language interoperability or for when you want to write compute-intensive code in C++ and use it in all languages.
Sharing XAML UI The UI in Windows Phone 8 and Windows 8 is written in XAML. However, the XAML implementations are not portable between the platforms. But you can isolate some of your custom basic UI building blocks into UserControls and share those classes as linked files that will be compiled for each platform. This technique is limited and should be used only for simple, reusable parts of your UI. The core of your UI should be built and tailored separately for each platform.
Conditional compilation with preprocessor directives If you have functionality that’s implemented differently for Windows Phone 8 and Windows 8, you can use conditional compilation to compile the code suitably for each platform. You can’t use conditional compilation in a Portable Class Library.
Windows 8.1 & Windows Phone 8BUT…
We WantResponsiviness
views
Windows 8.1 & Windows Phone 8
View technologies
Windows Phone 8
Windows 8.1
Windows 8.1 & Windows Phone 8
WP 8 APP W 8 APP based on HTML 5
Windows 8.1 & Windows Phone 8
Windows 8.1 & Windows Phone 8
But today we will not talk about responsive or cross device development or pattern’s, just want that you keep in mind that there are diferences and even if we want a ap for wp and windowa we can still use HTML 5 in Windows. Becouse even using xaml we may not have/want a total app reuse.
Windows 8.1 With HTML
“It also means that you’ll be able to leverage existing investments in JavaScript libraries and CSS template repositories: writing a native app doesn’t force you to switch frameworks or engage in expensive porting work. That said, it is also possible to use multiple languages to write an app, leveraging the dynamic nature of JavaScript for app logic while leveraging languages like C# and C++ for more computationally intensive tasks”
Kraig Brockschmidt
Windows 8.1 With HTML
- Reuse already tested front end code ( Forms, animations);
- Explore CSS, HTML & JS flexibility
- Reuse KB from the past
- Adoption in app development of Professionals with a estetical, UX and ergonomic sense
Windows 8.1 With HTML
Other platforms that run HTML and JavaScript native:• FirefoxOS• WebOS
Windows 8.1 With HTML
DEMO
Windows 8.1 With HTML
2D & 3D transforms
Transforms Animations
Transitions
MotionGrid
Flexbox
LayoutGradients
Filter Effects
Text-shadow
GraphicsMulti-column, hyphenation
Pagination
Position float
Content flow
Popular features of CSS 3 are well supported in Windows 8.1
Windows 8.1 With HTML
Web Sockets Web Workers IndexedDB
Ecmascript 5 File API & Blobs Geolocation
Audio tag Video tag
Touch & keyboard/Mouse Support Forms
Drag & Drop
Popular features of HTML 5 are well supported in Windows 8.1
Windows 8.1 With HTML
Windows app
IE rendering engine “Trident”
WinRT
Windows
WinJS
HTML/CSS/JS
Windows 8.1 With HTML
HTML 5 based Windows Store Apps Container
Windows 8.1 With HTML
WinJS 1.0
Windows 8 app
WinJS 2.0
Windows 8.1 app
WINJS is a collection of toolkits to make building Windows Store apps fast and easy
Windows 8.1 With HTMLWinJS controls declaration
<div id="calendar" data-win-control="WinJS.UI.DatePicker"></div> Declarative Way
WinJS controls are divs with atributtes that are processed when the processall method runs.
Imperative Way
In the HTML File<div id="calendarDiv" ></div>
In th JS filevar calendarDiv = document.getElementById("calendar");var calendarctrl = new WinJS.UI.DatePicker(calendarDiv);
Windows 8.1 With HTML
We can use any javascript framework once she run on Internet Explorer 11
Windows 8.1 With HTMLTools
Windows 8.1 With HTMLVisual Studio offers a set of template to make easy to start a project
Windows 8.1 With HTMLVisual Studio project struture
WINRT library instaciated directly by the app
Windows 8.1 With HTMLCSS Libraries for the Windows store app
Windows Store App Images
JavaScript
Windows 8.1 With HTML
App certify
App Manifest
Windows 8.1 With HTML
Improved Controls
• List view
• App bar
New Controls
• Hub
• Navigation bar
• Search box
• Back button
Infrastructure
• Scheduler
• Dispose model
• Async debugging
Building Blocks
• Binding template
• Repeater
• Item Container
WinJS 2.0 what’s new
Windows 8.1 With HTML
Controls DEMO
Windows 8.1 With HTML APPBar
Windows 8.1 With HTML APPBar
Windows 8.1 With HTMLBack Button
Windows 8.1 With HTMLRepeater
Windows 8.1 With HTMLRepeater
Conider the declaration of a list
Windows 8.1 With HTMLRepeater
Define the list Template
Windows 8.1 With HTMLRepeater
• ListView Changes
• Hub Control
• WebView Control
Are 3 controls that worth also a view let’s see this 3 in action
Windows 8.1 With HTML
Windows 8.1 With HTML
Build an Windows Store APP with HUB and Data Binding
Long Demo
Windows 8.1 With HTML
Build an Windows Store APP with WebView Control
Long Demo
Prior to Windows 8.1 you only had Iframes as a way to embeb external sitesFull reference about WebView http://blogs.windows.com/windows/b/appbuilder/archive/2013/07/17/what-s-new-in-webview-in-windows-8-1.aspx
Windows 8.1 With HTML
Debug HTML & WInJS ?
Windows 8.1 With HTML
DemoDebug HTML
& WInJS ?
Windows 8.1 With HTML
Recomended
Article for the ones starting to debug Windows 8 .1 HTMl store APPs with visual Studio 2013
http://msdn.microsoft.com/en-us/library/windows/apps/hh441474(v=vs.120).aspx
Windows 8.1 With HTML
Windows 8.1 With HTMLBeware
Windows 8.1 With HTMLBeware
Recap
References- Programming Windows Store Apps With HTML, CSS and Javascript Second Edition, Microsoft Press
- Windows 8.1 Controls - Windows Store Apps with HTML5 Refresh (http://www.youtube.com/watch?v=Drkh8Pb2li4)
- HTML Controls for Windows Store APPS (http://msdn.microsoft.com/en-us/library/windows/apps/bg182879.aspx)
- API changes for Windows 8.1 (http://msdn.microsoft.com/en-us/library/windows/apps/dn263112.aspx)
- Windows Dsev Center (http://msdn.microsoft.com/en-US/windows/apps/br211386)
- Windows 8.1 Store apps starter pack with canonical samples (http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples)
- Building Windows Store 8.1 apps using HTML, CSS and JavaScript @Channel 9 (http://channel9.msdn.com/Events/TechDays/TechDays-13-Basel/Building-Windows-Store-8-1-apps-using-HTML-CSS-and-JavaScript)
Onlne Live event : Windows 8.1 Developer Training: Geek Edition @ Microsoft Academy (http://www.microsoftvirtualacademy.com/liveevents/windows-8-1-developer-training-geek-edition#?fbid=E0I-ctThA1I)
Questions
http:
//w
ww
.spr
intfe
ed.c
om/2
011/
10/i
ntro
duci
ng-it
s-yo
ur-t
urn/
Contacts– [email protected]– @alexmarreiros– Digitalmindignition.com
Próximas reuniões presenciais
23/11/2013 – Novembro (Lisboa)30/11/2013 – Novembro (Porto)14/12/2013 – Dezembro (Lisboa)18/01/2014 – Janeiro (Lisboa)
Reserva estes dias na agenda! :)
Patrocinadores “GOLD”
Twitter: @PTMicrosoft http://www.microsoft.com/portugal
Patrocinadores “GOLD”
Twitter: @nokia http://www.nokia.com
Patrocinadores “Bronze”
Próximas reuniões presenciais18/01/2014 – Janeiro (Lisboa)01/02/2014 – Hackathon! (Lisboa)22/02/2014 – Fevereiro (Lisboa)22/03/2014 – Março (Lisboa)12/04/2014 – SQL Saturday! (Lisboa)19/04/2014 – Abril (Lisboa)
Reserva estes dias na agenda! :)