BUILD 2015 (13 ost) - Web, VS 2015, Edge, EF 7, Roslyn, Multilingual App Toolkit

Ostatnia porcja sesji z tegorocznego BUILD, na jakiej zaczepiłem oko. Narzędzia web w VS nie zaskakują, natomiast już w Edge można odnaleźć trochę świeżo wprowadzonych udogodnień, o implementacji kolejnej porcji nowych standardów Web nie wspominając. EF 7 może niczym niezwykłym nie rozwala, ale wydaje się być poprawnie budowanym frameworkiem, który w obecnych czasach o wiele lepiej spełni oczekiwania niż wcześniesze wersje. Obecna czwarta edycja Multilingual App Toolkit wspiera nie tylko aplikacje uniwersalne Windows, ale także te pisane w Xamarinie.

 

Modern Web Tooling in Visual Studio 2015

bower: samo zapisanie pliku konfiguracyjnego uruchamia pobieranie pakietów

http://1drv.ms/1JbXTBJ

 

Entity Framework 7: Data for Web, Phone, Store, and Desktop

osobny komponent wspierający SQL Server

encja - klasa POCO

logowanie zapytań sql

integracja z niestandardowymi zapytaniami Sql

ef - polecenia z linii komend w ASP.NET

dodawanie własnej logiki przy zapisywaniu zmian

aplikacje uniwersalne w Windows 10:  EntityFramework.Sqlite

zapisywanie do lokalnej bazy przy braku łączności z siecią i późniejsza synchronizacja

demo: aplikacja desktopowa Mac + Postgress

demo: aplikacja Xamarin Forms, iOS 6

http://1drv.ms/1HE9Km7

 

.NET Compiler Platform ("Roslyn"): Analyzers and the Rise of Code-Aware Libraries

http://1drv.ms/1ADqi0N

 

The "Project Spartan" Rendering Engine That Makes the Web Just Work

dźwięk uzależniony od położenia

CSS filters

warunkowe CSS np. supports (filter: blur(28px))

srcset - ładowanie wskazanej wersji obrazka w zależności od gęstości pikseli

emulacja większego dpi na desktopie:  zoom (np. 200% = 2x) + refresh strony

foreign object - html wewnątrz svg

http://1drv.ms/1K2YNj4

 

Building a Single-Page App Using Angular and TypeScript Using Office 365 APIs

http://1drv.ms/1GPimue

 

What’s New in F12 for "Project Spartan"

F12 znajduje wszystkie instancje IE i Spartana, także hostowane w aplikacjach (np. Windows Forms, WPF)

nowe narzędzie do sieci, napisane w TS, używane także w VS, domyślnie włączone, z search po wszystkim

debugger - breakpointy dla strzałów sieciowych, logujące, dla zdarzeń, zatrzymujące; async call stack (np. strzał sieciowy)

asynchroniczna operacja dla zdarzenia DOMContentLoaded, także dla AddEventListener z click, podobnie przy xhr.onreadystatechange

lepsza nawigacja po źródłach np. TS

łatwe odniesienia do źródeł np. TS, SCSS

obsługa składni SCSS i nawigacja

pretty printing

nowy profiler JS, łatwe przechodzenie do źródeł

eksperymentalnie: edycja JS, CSS, inspekcja cookie, local i session storage

http://1drv.ms/1KJwnMh

 

Cross-Platform Localization with the Multilingual App Toolkit

wsparcie ostatniej wersji toolkitu także dla aplikacji Xamarin (z Xamarin Forms, ale także i bez - z natywnym UI w iOS i Android)

http://1drv.ms/1dKqjFU

Przyszłość komponentów webowych (2)

Web Components in Action to druga pozycja o rozwoju komponentów webowych, którą ostatnio polecił mi Marcin Najder. Jestem pod wrażeniem, natywny HTML nareszcie ma szanse stać się komponentowy w prawdziwym znaczeniu tego słowa. Dla ekip wywodzących się z XAML takie podejście do UI to nic dziwnego, dla web developerów z zakorzenionymi przyzwyczajeniami duży skok cywilizacyjny -;) Tym razem konkretnie o bibliotekach pozwalających już dziś tworzyć interfejs użytkownika w przyszły sposób.

Mutation Observers, MDV - binding

Web Animations - połączenie animacji z CSS i SVG

http://www.polymer-project.org/

ASP.NET MVC + HTML5: odc.1

Trochę wybranych informacji z tematyki tandemu ASP.NET MVC i HTML5.

ASP.NET MVC

• do udostępniania danych zamiast WCF, jeszcze łatwiej używać danych JSON z poziomu klienta HTML/JS
• własny dependency resolver (np. oparty o Unity.MVC3 zapewniający odpowiednie disposowanie obiektów związanych z aplikacją web)

//kontroler do udostępniania danych w JSON, nie dla widoku HTML/CSS

public class DataServiceController: Controller {

IAppointmentRepository  _appointmentRepository;

//zasilanie z IoC

public DataServiceController(IAppointmentRepository appointmentRepository) {

         _appointmentRepository = appointmentRepository;

}

public ActionResult GetAppointment(int id)  {  //JsonResult dziedziczy po ActionResult

         return Json(_AppointmentRepository.GetAppointment(id), JsonRequestBehavior.AllowGet);

}

}

http://html5boilerplate.com/ – szablony użycia

• najlepsze praktyki
• cross-browser
• HTML5
• optymalizacje dla mobilnych przeglądarek
• wsparcie także dla starszych IE
• rozwiązania dla wydruku
• hostowane w sieci skrypty

BoilerPlate na starcie

• HTML5 doctype
• kodowanie utf-8
• tryb renderowania IE na edge (w ostatniej wersji)
• viewport na device-width
• jQuery pobierane z sieci z lokalnym fallbackiem
• ładowany Modernizr

Modyfikacja _Layout.cshtml

• Wspólny “master” dla wszystkich widoków/stron HTML w ASP.NET MVC
• Możemy umieścić w nim odpowiednie elementy z index.html z BoilerPlate
• obsługa różnych wersji IE
• utf-8
• tryb renderowania IE na edge
• referencje do skryptów (jQuery z lokalnym fallbackiem, Modernizr, …)
• prośba o zainstalowanie przeglądarki zgodnej z HTML5 (IE od wersji 9, Chrome, …) //aplikacja dedykowana dla nowoczesnych przeglądarek
• …

///<reference path=”…” />  - intellisense w VS działa także dla naszych skryptów

Biblioteki dla canvas:

• EaselJS
• Fabric
• Flot
• Gury
• JCanvaScript

Łatwe rysowanie wykresu za pomocą Flot:

var chartOptions = {

series: {

       lines:  { show: true, fill: true },

       points:  { show: true, radius: 5 }

},

grid: {  hoverable: true,  autoHighlight: true },

legend: {  position:  ‘se’ },  //south-east

yaxis:  { max:  maxY, min: minY },

xaxis:  { minTickSize:  [1, ‘hour’],  mode:  ‘time’,  timeformat:  ‘%h %P’,  twelveHourClock: true }

};

$.plot(canvasDiv, [

color: color,

shadowSize:  4,

label: ‘Rytm serca’,

data: heartData

}], chartOptions);

SVG

Biblioteka:  Raphael

Proste rysowanie interaktywnych diagramów kołowych:

raphael(‘Aaa’, x, y)

.pieChart(scene.width / 2,

                   scene.height / 4 + 10,

                    66, values, labels, “#fff”);

Tekst na ścieżce:

<svg>

<defs>

       <path id=”path1” d=”M75,20 a1,1 0 0,0 100,0” />

</defs>

<text x=”10” y=”100” style=”fill:green;”>

          <textPath xlink:href=”#path1”>Koko koko svg spoko</textPath>

</text>

</svg>

Video HTML5

http://www.mirovideoconverter.com/

http://videojs.com/

CSS3 odc.4 (i coś ponadto)

Kolejne uzupełnienia na temat potężnych możliwości współczesnego CSS3 (niektóre rzeczy się już powtarzają, ale w niektórych przypadkach chciałem je ponownie uwiecznić czasami z uwagi na pewne szczegóły konkretnych przypadków), a także SVG i ogólnie HTML5. Notatki sporządziłem w oparciu o prezentacje What's new with HTML5, Javascript, and CSS3 i Building beautiful and interactive apps with HTML5 & CSS3, które już oglądałem raz jesienią zeszłego roku, ale teraz z innej perspektywy postanowiłem do nich powrócić. Demonstrowane możliwości robią z pewnością ciągle duże wrażenie.

Transformacje 3D

• translate, scale, rotate, skew in X, Y & Z
• perspective

 

Transitions

• smooth animation of CSS properties from old to new value
• can be used with CSS pseudo-classes such as :hover

Animations

• keyframe-based definition of a set of CSS property changes
• allows richer animations than CSS Transitions
• event model allows complex use in combination with script

CSS3 Content Flow

• CSS3 Multi-column and Hyphenation
  • Split text into columns and hyphenate to improve readability

    

      

• CSS3 Positioned Floats
  • Flow content around positioned elements

   

• CSS3 Regions
  • Dynamically overflow content from one element into another

    

       Pobieranie zawartości z iframe i wstawianie do elementów z -ms-flow-from.

       Jeśli zawartość nie mieści się w jednym <div> to zastaje umieszczona także w drugim.

    

Dotyk

SVG filter effects

• Collection of pre-defined image filters
• Apply to any SVG content
• Hardware-accelerated implementation

IndexedDB

• Store, index, and query data on the client
• Full key-value pair object stores
• Index using object attributes

File API

• Read data from files chosen by the user
• New objects to represent data
  • Blob, File, FileReader
• New methods to access data
  • readAsArrayBuffer
  • readAsBinaryString
  • readAsText
  • readAsDataURL

HTML5 Drag/drop

• Make any element draggable
• Drag files from the desktop to the browser

HTML5 History

• Expected back/forward behavior
• URLs for sharing and deep linking
• Accurate “referrer” data in HTTP requests

Inne

• HTML5 Sandbox (dla iframe)
• HTML5 Parsing
• Spellchecking
• Progress Events and Binary Data with XHR Level 2
• Multi-file upload
• New hit-testing APIs
• …

HTML5 - informacje różne

Ten post nie jest na jeden konkretny temat. Po prostu zebrało mi się trochę dodatkowych informacji związanych z różnymi zagadnieniami związanymi z HTML5, które chciałem sobie zapisać.

Obsługa niewspieranych funkcjonalności w starszych przeglądarkach

(na podstawie Filling the HTML5 Gaps with Polyfills and Shims)

Wykrywanie wspieranych funkcjonalności:

Łatanie brakujących funkcjonalności:

Sposób na wyświetlenie nieobsługiwanych tagów semantycznych z HTML5:

Sposób na rysowanie ramek z zaokrąglonymi rogami, jeśli nie są obsługiwane:

Multimedia

(na podstawie 5 Things You Need To Know To Start Using <video> and <audio> Today)

Szykuje się standard w HTML5 dla adaptywnego streamingu

Tagi multimedialne mogą mieć warunek media (znany z media queries)

Wyświetlanie video na <canvas>

Efekty stylowania elementu <video>. Jak widać … różne.

Fullscreen  - na razie nie ma jeszcze standardu, ale możemy wyświetlać video na powierzchni strony za pomocą JavaScript (istnieją gotowe rozwiązania)

HTML5  a Silverlight

(na podstawie HTML5 for Silverlight Developers)

BTW rok temu oglądałem z brakiem pewnego przekonania, wyszukując i tak różne braki w HTML5.  Teraz obejrzałem to zupełnie z innej perspektywy, znając wszystkie zagadnienia i dostrzegając ich piękno mimo pewnych jeszcze niedopracowań, czy duplikacji … Osobiście więcej bym dał tu jQuery i dałbym sporą część o Knockout, dałbym więcej CSS3 tak by pokazać także animacje i transformacje czy media queries, wspomniałbym o datach data-, o walidacji, o nowych kontrolkach, o drag & drop, o webworkerach …

ViewBox w SVG jest odpowiednikiem ViewBox z Silverlight

Grafiki wektorowe z XAML można transformować na na SVG.

Stylowanie

• SVG ‘defs’ & ‘use’
• style CSS

Odwoływanie się do zdefiniowanych wcześniej obiektów (#Monster) i zasobów (#grad):

Adobe Illustrator potrafi eksportować grafikę (także tą bardziej złożoną z animacjami) do <canvas> w HTML

ECMAScript5

Żywe przykłady udoskonaleń w samym czystym Java Script z ostatniego posta.

WebStorage - nie można rozszerzać jego pojemności (w przeciwieństwie do Isolated Storage w Silverlight)

Websockety

(na podstawie Hot from the Labs: HTML5 WebSockets)