Sie sagen es, wir coden es!

Sass, Less, Less, Sass? Oder doch Stylus?

Ok, Stop. Worum geht’s hier eigentlich? Less? More? Less is more?
Jein.
Die Präprozessoren namens SASS („Syntetically Awesome Stylesheets“) und LESS (wie „less“) haben sich als die beliebtesten erwiesen, um die Programmiersprache CSS schlank zu halten und unnötige Schreibarbeit zu eliminieren. Das tun sie mit Variablen, Funktionen und Mixins (*mehrfach verwendbares Bündel an Funktionalitäten), um CSS zu einer (noch) einfacheren, runden Sprache zu machen und den Code zu verkürzen. Also schafft man quasi mit weniger genauso viel, wenn nicht sogar mehr. Das Gleiche tut auch der Präprozessor „Stylus“, welcher weniger bekannt ist. Die, die ihn kennen, insistieren darauf, dass Stylus die beste der drei Varianten darstellt.
So herrschen viele Debatten darüber, was denn nun der „beste“ Präprozessor sei. Die Entscheidung macht sich meist in den kleinen Details fest, die die Präprozessoren in ihren Feinheiten voneinander unterscheiden. So mancher Entwickler befindet sich gerade zu Beginn in dem Dilemma: Wenn doch die Strukturen der Präprozessoren so ähnlich sind, gestaltet sich die Auswahl schwierig. Und macht es überhaupt so einen Unterschied?
Nun, das muss jeder für sich selbst entscheiden, wie viel wert er den verschiedenen Feinheiten in den Unterschieden gibt. Wir wollen dir mit diesem Beitrag helfen, einen Überblick darzulegen.

Warum sind Präprozessoren überhaupt sinnvoll?
Wie schon erwähnt, dienen die Präprozessoren der Vereinfachung des Code Handlings und der Verkürzung des Codes. Die Style-Sprache CSS, die mit HTML Hand in Hand geht, macht im Prinzip folgendes: CSS beschreibt jedes einzelne Element mit Attributen, damit der Prozessor über diese Eigenschaftsbeschreibung drüber liest und letztendlich die Gesamtheit der Elemente in eine Form bringt, Farben, Größen, Breiten und Längen an die richtige Stelle setzt und uns letztendlich das Endprodukt auf dem Bildschirm sehen lässt. Das Zeitaufwendige bzw. etwas Umständliche an der doch so einfachen Programmiersprache ist hierbei die Regel, dass man für jeden einzelnen Abschnitt die Eigenschaften wiederholen muss. Dieser Umstand läuft eigentlich den Prinzipien anderer Programmiersprachen entgegen, da man sich eigentlich so wenig wie möglich wiederholen sollte, um den Code so simpel und effizient wie möglich zu schreiben. Das ist das sogenannte DRY* Prinzip, an das sich jeder Entwickler halten sollte. *Don’t Repeat Yourself – die Marketing Regel (Keep it simple and short) im Informatiker Milieu.
Die Präprozessoren wie SASS, LESS oder auch Stylus erleichtern das Spiel nun durch ihre Variablen, Funktionen und Mixins, indem sie bereits einmal definierte Eigenschaften und Muster immer wieder verwenden können. Ähnlich wie wenn man seine Mitbewohner, Kinder, Partner oder Kollegen nur einmal darum bitten würde, die Spülmaschine auszuräumen – und sie würden es immer wieder machen, ohne, dass du dich wiederholen müsstest. Verständlich, dass diese Präprozessoren so beliebt sind, oder?
Und um wieder in den Bereich der Informatik zurückzukehren: Kleine Abänderungen am Code sind so viel einfacher zu handhaben.

Gibt es einen Gewinner?
Unsere Antwort: Reine Ansichtssache.
Im Netz gibt es zahlreiche Diskussionen, darunter wirklich gute Argumente für die jeweiligen Präprozessoren. LESS siegt in der Nutzerfreundlichkeit und Accessibility, SASS setzt sich als eindeutiger Sieger in der Logik und Einfachheit der Berechnungen durch. Stylus nimmt all diese Faktoren mit LESS und SASS auf und überzeugt zudem durch den einfachen Aufbau mit Node.js und der JavaScript Vereinbarkeit, wohingegen die Vorteile von SASS mit der Komplexität von Ruby den ein oder anderen abschrecken. Das Besondere an Stylus ist darüber hinaus die Flexibilität, mit der man den Code schreiben kann. Die typischen CSS Klammern, die du bei LESS zwangsläufig ebenfalls setzen musst, bei SASS hingegen weglassen kannst, kannst du bei Stylus beliebig mischen und das in ein und demselben Dokument. Manche finden gerade diesen Aspekt genial, andere erachten es als unnötiges Feature. Viele greifen z.B. deshalb auf LESS zurück, da der Zweck der Code-Vereinfachung erfüllt wird und das Handling simpel umsetzbar ist. Wir sind der Meinung, dass alle ihre Vorteile haben. Solange du damit gut und einfach coden kannst, ist die Wahl am sinnvollsten, mit der du am besten zurechtkommst.

Unsere Website Empfehlungen, auf denen du dich schlau machen kannst

Wir können persönlich empfehlen erst einmal den direkten Vergleich in den Codes zwischen SASS und Less einzusehen.

Diese Seite gibt dir eine umfassende Erklärung sowie Code Beispiele warum genau SASS oder LESS verschiedene Aspekte besser umsetzen kann. Diese Auseinandersetzung beschäftigt sich mit Aspekten wie User-Freundlichkeit, Mathematik, Media Queries, Language Ability und vielem mehr. Reinzuschauen lohnt sich. Natürlich findest du ein Plädoyer für alles, wenn du nur danach suchst, denn Interessen und Sympathien fallen nun mal eher subjektiv aus. Doch der ein oder andere kann sich inspirieren lassen und sich auch mit den Gründen für die eine oder andere Wahl auseinandersetzen, um für sich die individuelle zu treffen.

Hier findet ihr eine Auseinandersetzung aller drei Präprozessoren und einem Plädoyer für Stylus. Auch hier erachten wir die Abwägung jeder Vor- und Nachteile der drei Varianten für hilfreich und gut durchdacht.

Accelerated Mobile Pages

Heute stellen wir euch eine der aktuellsten Entwicklungen im Bereich mobiler Internetnutzung vor:

Accelerated Mobile Pages (AMPs) sind auf mobile Nutzung spezialisierte Websites, die sich durch stark verringerte Ladezeiten auszeichnen. Es handelt sich dabei um ein von Google unterstütztes Open Source Projekt, das die Benutzerfreundlichkeit von mobilen Websites deutlich steigern soll. Sie sollen außerdem unabhängig von der Art des verwendeten Smartphones, Tablets, etc. sein.

Deutlicher Trend zur Nutzung mobiler Websites
In den letzten Jahren zeichnet sich ein deutlicher Trend zur Nutzung von Websites über mobile Endgeräte ab. Vor allem zum Lesen von Nachrichten oder für Online-Shopping werden vermehrt Smartphones oder Tablets verwendet. Durch lange Ladezeiten von Websites erhöht sich jedoch die Absprungrate der Nutzer – je länger eine Seite lädt, desto mehr Nutzer und potentielle Kunden brechen den Ladevorgang ab. Dadurch verringert sich zum Beispiel für Publisher die Anzahl ihrer Leser und die Höhe der Werbeeinahmen. Da die Zukunft des Internets in vielen Bereichen mobil ist, muss sich also an die veränderte Nutzung des Internets angepasst werden.

Aufruf von Websites in Sekundenbruchteilen
AMPs ermöglichen dies, indem sie die Gesamtgröße einer Website größtmöglich reduzieren. Da die Ladegeschwindigkeit von der Größe der Website abhängt, können AMPs Inhalte in einem Bruchteil der Ladezeit gegenüber herkömmlichen mobiloptimierten Websites darstellen. Die Darstellung von AMPs soll bis zu vier Mal schneller bei einem Zehntel des Datenvolumens erfolgen. Dies wird zum einen dadurch ermöglicht, dass zunächst nur die Inhalte geladen werden, die unmittelbar nach Öffnen der Seite sichtbar sein müssen. Die restlichen Inhalte werden dann nachgeladen. Dadurch ist das Lesen der Website bereits während des Ladevorgangs möglich.

Anpassung des Codes zur schnelleren Darstellung
Realisiert werden AMPs zum einen durch eine speziell angepasste Form von HTML – AMP-HTML genannt.  Zudem wird ein Content Delivery Network genutzt. Außerdem kommt eine Reduktion von CSS und Javascript zur Anwendung. Da Letzteres den Nachteil hat, dass es den Aufbau einer Seite stark verlangsamen kann, darf nur asynchrones Javascript verwendet werden. Auch CSS darf nur inline und mit maximal 50 Kilobytes implementiert werden.

Unterstützung durch Google Cache Server
Um schnelle Ladezeiten zu ermöglichen stellt Google außerdem Cache Server zur Verfügung. Validierte AMPs werden im Cache Server von Google gespeichert, auf einem Proxyserver bereitgestellt und über ein Content Delivery Network an den Nutzer ausgeliefert. Der Quellcode von AMPs kann von allen Servern interpretiert werden. Die AMP sollte idealerweise unter einer URL gehostet werden, die für den Nutzer nachvollziehbar ist, also zum Beispiel: amp.websiteurl.de/inhalt oder websiteurl.de/inhalt/amp.

Implementierung auf immer mehr Plattformen
Unterstützt werden AMPs mittlerweile durch viele Plattformen, wie zum Beispiel Twitter, Pinterest, und natürlich Google. So können Mobilgerätenutzer beispielsweise von Google zu einer im Cache gespeicherten AMP weitergeleitet werden, sofern in den Suchergebnissen eine Website mit einer gültigen AMP-Version vorhanden ist. Diese wird dann oberhalb der regulären Suchergebnisse angezeigt. Außerdem haben auch viele Medienhäuser mittlerweile AMPs implementiert und damit auf den Trend zum Nachrichtenkonsum über mobile Endgeräte reagiert. Dem ein oder anderen ist vielleicht schon aufgefallen, dass AMPs zum Beispiel in der Google News App integriert wurden und man dadurch bequem in Sekundenschnelle durch die Artikel swipen kann. Das schnellere Laden der Seiten betrifft übrigens auch Werbeanzeigen, sodass Schaltung von Werbung sich im Gegensatz zu herkömmlichen Websites nicht negativ auf die Nutzererfahrung und auswirkt. AMPs stellen also eine äußerst zukunftsorientierte Entwicklung dar, die Nutzerfreundlichkeit in den Vordergrund stellt.

Wer noch mehr über AMPs erfahren will und an Beispielen des AMP-HTML-Codes interessiert ist, sollte sich diesen Wiki-Eintrag ansehen.

Progressive Web Apps & Object Oriented CSS


Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Heute gehen wir weiter auf euer Leser-Feedback ein und setzen unsere Übersicht zu den von euch gewünschten Themen fort. Im Folgenden geben wir euch einen kurzen Überblick über PWAs und OOCSS:

PWAs

Bei Progressive Web Apps handelt es sich um eine relativ neue Mischform aus Website und nativer App. PWAs lassen sich wie eine native App verwenden, benötigen dafür jedoch keine standardmäßige Installation. Stattdessen können über den Webbrowser auf dem Homescreen Verknüpfungen hinterlegt werden, die dann die entsprechende Website aufrufen. Für Nutzer bringt dies den Vorteil, dass sie keine App aus dem AppStore laden und dafür Speicherplatz freigeben müssen. Für die Betreiber entstehen durch das Umgehen des AppStores weniger Kosten bei vergleichbarer Kundenbindung.

PWAs lassen sich auch bei geringer Bandbreite nutzen und sind mit Hilfe von Service Workers offline verwendbar. Dadurch unterstützen PWAs das Offline First-Konzept und ermöglichen es dem Nutzer, Inhalte jederzeit und überall unabhängig von einer Internetverbindung abrufen zu können (mehr zu Offline First erfahrt ihr in unserem Blogbeitrag). Neue Inhalte laden dann entsprechend bei bestehender Internetverbindung. Außerdem werden auch Push Notifications unterstützt.

Realisierbar sind PWAs unter anderem mit HTML5, CSS3, JavaScript und Service Worker. Bisher besteht allerdings nur bei Chrome und Firefox ein vollständiger Support für Service Worker; weitere Browser wie Safari und Opera sollen jedoch folgen.

OOCSS

Object Oriented CSS ist eine Methode, um CSS modulär und objektorientiert zu gestalten. Diese besteht zum einen daraus, die Struktur eines Objekts (z.B. Höhe, Breite) von seinem Design (z.B. Schriftart, Farbe) zu trennen. Dadurch können Komponente problemlos innerhalb des Layouts verschoben werden. Außerdem geht es bei OOCSS auch darum, Inhalt und Container zu trennen, sodass jedes Objekt sich an einen beliebigen Inhalt anpasst. Folgendes Beispiel verdeutlicht dieses Prinzip und seine Vorteile:

In der obigen Form wird das Gesamterscheinungsbild der Objekte jeweils einzeln definiert. Es findet keine Unterscheidung zwischen Objektstruktur und Objektbeschichtung statt. Der Nachteil daran ist, dass sich die Designeigenschaften für jedes Objekt wiederholen müssen, obwohl sie in diesem Fall identisch sind. Das kostet zum einen viel Zeit, zum anderen ist es fehleranfällig, da durch Flüchtigkeitsfehler schnell Abweichungen entstehen können. Deren Behebung ist wiederum mit viel Zeitaufwand verbunden. OOCSS dagegen vermeidet diese Wiederholungen und die damit verbundenen Probleme auf folgende Weise:

 

Hier ist eine Trennung von Objekt und Beschichtung vorhanden. Letztere wird lediglich einmal definiert und dann mit den Elementen verknüpft, für welche das entsprechende Design gewünscht ist. Dadurch gestaltet sich der Code deutlich kürzer und einfacher, sowie flexibler und vor allem wiederverwendbar. Mit OOCSS lässt sich also durch das Vermeiden von Wiederholungen deutlich schneller und fehlerfreier arbeiten.

Für mehr Informationen zu OOCSS empfehlen wir euch diesen Blogbeitrag (auf Englisch).

Wir hoffen, euch mit diesem Beitrag eine hilfreiche Übersicht gegeben zu haben. Über weiteres Feedback und Anregungen in den Kommentaren freuen wir uns sehr!

 

Frontend Frameworks – Teil 3

Im dritten Teil unserer Frontend Framework Reihe kommen wir zu den etwas anspruchsvolleren Frameworks, die eher für Leute mit Berufserfahrung als Developer angemessen sind.

Da hätten wir zum einen Foundation, welches von Großunternehmen wie eBay, Facebook oder Mozilla benutzt wird. Dieses Framework unterstützt GPU Beschleunigungen, was gleichmäßige und blitzschnelle Animationen ermöglicht. Ebenso hat es keine Lock-In bei Styles, sodass man flexibler arbeiten kann. Zudem benutzt es REMS statt Pixel. Das hat den Nutzen, dass man sich nicht an bestimmte Höhen oder Breiten bei jedem Endgerät richten muss.

Foundation gilt als Framework für Entwickler mit einem gewissen Erfahrungspensum, die vor Allem schnelle, reaktionsfähige Webseiten programmieren.

 

Sucht ihr nach einem Framework, mit dem ihr simpel Google’s Material Design Richtlinien befolgt, dann macht ihr mit Material UI nichts falsch, denn es ist das am besten ausgearbeitete Framework, um die Richtlinien umzusetzen. Aber: es ist kein geeigneter Ansatzpunkt, um ein neues Webdesign Projekt aufzusetzen.

Mit gebrauchsfertigen CSS- und Materialdesign-kompatiblen Klassen beladen, wird Material UI auf dem LESS Preprocessor aufgebaut. Weil es React-Komponenten verwendet, ist ein gewisses Verständnis von React hilfreich.

Absolut bezeichnend für dieses Framework ist, dass es individuell anpassbare Stile enthält, die in einzelne Dateien getrennt sind. So können Sie LESS CSS-Variablen überschreiben, ohne Framework-Komponenten zu beeinflussen.

Insgesamt ist es daher für Entwickler geeignet, die Erfahrung mit React.js haben und einen einfachen Weg einschlagen wollen, um die Material Design Richtlinien umzusetzen.

 

Entwickelt von Yahoo Developern ist Pure ein Framework, mit dem man so gut wie jedes Projekt angehen kann. Mit einem Array an CSS Modulen kann man mit Pure reaktionsfähige Buttons, Menüs, Grids, Tabellen und anderen interessanten Features kreieren. Dennoch ist hierbei zu beachten, dass momentan noch keine jQuery oder JavaScript PlugIns dafür vorhanden sind, da das Framework Pure ausschließlich .css Dateien umfasst.

Wenn es mit Gzip minimiert und komprimiert wird, verkleinert sich die Dateigröße bereits auf 4,75 kB, was es zu einem der schnellsten, platzsparendsten und geschicktesten Frameworks macht. Das ist der Grund, weshalb gerade so viele Mobile Developer so begeistert von Pure sind.

Folglich ideal für Entwickler, die sich mit Responsive Development beschäftigen.

 

UIKit ist ein höchst modulares Framework, welches sich von anderen Frontend Frameworks hervorhebt. Einer der vielen Gründe hierbei ist wohl, dass es sich SASS CSS preprocessors und LESS gleichsam bedient.
Mit einer Anordnung von leichten, reaktionsfähigen Klassen mit den gleichbleibend, gleichnamigen conventions wurde UIKit zu einem der beliebtesten Frontend Frameworks.
Durch die 30 modularen und erweiterbaren Komponenten kann es kombiniert werden, um noch mehr Einsatzflexibilität zu bieten.

Es enthält Navigationskomponenten wie side navigation bars, Elemente wie HTML-Formulare und Tabellen, JavaScript-Komponenten wie Off-Canvas-Bars und modale Dialoge; verbreitete Elemente wie Buttons, Abzeichen, Overlays und Layoutkomponenten, einschließlich eines flüssigen, vollständig ansprechenden Grids.

Das Framework hat zwar unglaublich viel an Angebot zu bieten, ist jedoch durch seinen relativ neuen Status für Beginner nicht zwingend geeignet, da es dementsprechend wenige Entwickler gibt, die damit schon repräsentative Projekte oder Tutorials dazu angefertigt haben.
Daher stehen hier Möglichkeiten gegen die Schwierigkeit des Neuheitsgrades. Folglich ist es besser, wenn sich Entwickler mit einer ansehnlichen Erfahrung an Programmierung daran versuchen. Letzten Endes ist es ein sagenhaftes Framework für simple sowie für komplexe Projekte und eine echte Alternative mit viel Nutzungspotential.

 

Für Diejenigen unter uns, die besondere Layout Bedürfnisse haben, ist Susy ein geeignetes Tool. Der Begriff Tool fällt hier deshalb, weil viele Susy als Grid Maker klassifizieren. Dennoch rüstet dieses Layout Tool einen unabdingbar für individuelle, anspruchsvolle und kreative Layout Wünsche auf. Es übernimmt alle Kalkulationen für den Benutzer, sodass man viel an Zeit und Energie spart.

 

 

Alles in Einem sollte die Entscheidung, welches Framework man verwenden möchte, nicht auf ihrer Beliebtheit beruhen, sondern vielmehr darauf, was für den Bedarf der Entwicklung am besten passt.

 

 

Frontend Frameworks – Teil 2

In Teil 1 unseres „Frontend Frameworks“ haben wir euch schon einmal in die Materie eingeführt, wie ihr das richtige Framework für euch speziell ermittelt und was man dabei beachten sollte. Da hieß es, dass man nicht immer die gängigen Frameworks nutzen muss, um ein großartige Webseite zu programmieren. Es gibt so viele neue, alternative Möglichkeiten, die euch – je nach eurem Kenntnis-Stand – besser dienen können.

Unsere Einführung ist angelehnt an die Top 10 Frontend Frameworks aus 2016.
Nach jeder Kurzbeschreibung der Frameworks, wird eingestuft, für welche Entwickler welchen Kenntnisstandes diese geeignet sind. Teil 2 wird sich vorerst mit Coding-Beginnern und Berufseinsteigern in der Entwicklung beschäftigen. Im dritten Teil unserer Beitragsreihe kommen dann die Frameworks für Fortgeschrittene mit mehrjähriger Berufserfahrung. Dran bleiben lohnt sich!

 

Der Korrektheit halber führen wir erst einmal Bootstrap an, das allgemein als gängig gilt und oft verwendet wird. Das von den Twitter-Entwicklern programmierte Framework beinhaltet einige der vebreitetsten Programmiersprachen: HTML, JavaScript und CSS. Bootstrap beinhaltet reaktionsfähige Webdesign Standards, die es dir erlauben Webseiten in jeglicher Komplexität und Größe zu entwickeln. Weil das Framework regelmäßig geupdatet wird, kann es in kürzester Zeit auf neue Features reagieren und sie einbinden.

Das Rundum-Paket ist für Beginner und Diejenigen, die ein robusteres Framework bevorzugen, recht ideal, enthält jedoch den Nachteil, dass durch die für das Web unübliche Größe lange Ladezeiten entstehen können. Das kommt durch die Masse an Klassen zustande, wovon nur ein Bruchteil genutzt wird.

 


Ein absoluter Newcomer mit Potential ist Semantic-UI. Ein Framework, welches sich durch seine Einfachheit auszeichnet und für Beginner sowie für Jene, die ein flinkes und leichtes Framework bevorzugen, geeignet ist.

Man sagt, dass Jene, die ein komplexeres Design und komplexeres Development fordern, dieses Framework Schwachstellen aufweisen kann. Dennoch birgt es den Vorteil von kleinen Dateigrößen, kurzen Ladezeiten und unglaublicher Aufstellung an Bibliotheken, sodass man eigentlich keine anderen Bibliotheken mehr braucht.

 

Materialize beinhaltet Design Besonderheiten von Google und stellt ready-to-use buttons bereit, icons, Karten, Formen und anderen Komponenten. Diese Elemente werden in einer Standardversion und in der Version, die mit SASS läuft, angeboten.

Außerdem umfasst Materialize einen praktischen IZ column grid feature, was man für Website Layouts verwenden kann. Mit Materialize kann man Typographien, Schatten, Farben und andere prägnante Animationen verwenden. Der Vorteil der immensen Auswahl an Klassen ist hierbei definitiv als Vorteil zu nennen. Konträr dazu stehen die großen Dateigrößen, die ebenso lange laden müssen wie bei Bootstrap. Somit ist das Framework ein etwas sperriges.

Als geeignet eingestuft wird es für Entwickler, die noch etwas Orientierung und Anleitung brauchen bezüglich Google’s Material Design Spezifiken.

 

Diejenigen, die kleine Projekte umsetzen wollen, für welche nicht alle Style-Klassen eines großen Frameworks erforderlich sind, ist Skeleton eine nennenswerte Alternative, die nicht jedem geläufig ist.
Skeleton ist ein reaktionsfähiger Textbaustein mit einem 400 Zeilen Code. Dieses Framework ist lediglich dazu gedacht mit der Entwicklung eines Web Projektes anzufangen und bietet daher nur das Minimum an Voraussetzungen wie z.B. Tabellen, Formen, Listen, Buttons, etc. Daher für Berufseinsteiger ideal, die sich mit ersten Projekten profilieren wollen und neu in die Praxis- und Projektwelt eintreten.

Hilfreiche jQuery/Javascript Plugins – Teil 3


Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Willkommen zum dritten Teil unserer JS/jQuery Reihe. Wie immer gibt es eine Aufteilung zwischen Front- und Backend.

Frontend

Backend

Hilfreiche jQuery/Javascript Plugins – Teil 2

Heute geht es weiter mit der JQuery/JS Plugin Reihe. Der Beitrag ist wieder in Frontend und Backend unterteilt.

Frontend:

Backend

Wie immer, wenn ihr weitere gute Plugins kennt einfach in die Kommentare schreiben.

Hilfreiche jQuery/Javascript Plugins – Teil 1

Heute fange ich eine neue Beitragsreihe an, in der ich euch ein paar handverlesene jQuery/Javascript Plugins vorstelle. Es sind Frontend- , als auch Backend-Plugins dabei, die einem das Leben viel leichter machen.

Frontend:

Backend:

Ihr habt weitere Plugins, die ihr erwähnenswert findet? Nennt sie doch in den Kommentaren, dann kommen sie vielleicht in den nächsten Teil dieser Reihe!

Universal Windows Plattform Apps – Was ist neu?


Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Ich besuchte vor einiger Zeit die Windows 10 bis 10 Schulung von Microsoft, in der es um das Thema Einführung der Apps der universellen Windows Plattform mit Windows 10 und Visual Studio 2015 ging. Ich habe diverse Dinge über die neuen Apps gelernt und möchte mein Wissen mit euch teilen.

Starten wir das Ganze mit einem Vergleich zwischen klassischen Desktop Applikationen und den neu eingeführten Apps:

Klassische Desktop Apps Universal Apps
Von überall installierbar Nur vom Store oder über Sideloading installierbar
Kann alles mögliche während der Installation machen Vordefinierte Installationsverfahren
Administrator Modus verfügbar Admin Modus nicht verfügbar. Eingeschränkte Rechte
Kann während der Laufzeit auf das gesamte System zugreifen Eingeschränkter Zugriff auf eine bestimmte Anzahl an APIs. Deklariert explizit Zugriffe
Vollständige Kommunikation mit anderen Prozessen Sandbox

Man kann anhand der Tabelle sehen, dass sich Microsoft mit den Apps der universellen Windows-Plattform (UWP-Apps) ein bestimmtes Ziel gesetzt hat: Sicherheit. Das gesamte neu eingeführte System soll dem Endnutzer das Gefühl der Kontrolle geben, denn dieses fehlte bisher ganz. Ein kleines Beispiel aus meinem Alltag dazu: Meine Mutter surft im Internet und auf einmal taucht ein Pop-Up auf, mit blinkendem Text “Achtung ihr System ist sehr langsam, laden Sie unseren super seriösen Registry Cleaner herunter!“. Wie meine Mutter so ist, macht sie sich Sorgen um das Wohlergehen ihres PCs und klickt auf den seriös wirkenden Link. Eine *.exe wird heruntergeladen und nach einer Administrationsberechtigungsanfrage, die mit “Ja” beantwortet wurde, installiert sich das Programm. Es wird ein Scan gemacht, 42 Fehler werden gefunden und um diese zu beheben muss man die Pro Version kaufen, die 119€ kostet. An diesem Zeitpunkt angelangt hat meine Mutter auch keine Lust mehr und deinstalliert das Programm. Tage später erhalte ich einen Anruf, bei dem sie mir erzählt, dass ihr Browser nun ganz komisch aussieht mit neuen Leisten und ihre Startseite lautet nun www.kaufserioeseprogramme.ru. Sie kann sich das Ganze nicht erklären und wüsste nicht woher das kommt.

Anhand dieses kleinen Beispiels können wir sehen, dass das aktuelle Applikationssystem sehr undurchsichtig für den Endnutzer ist. Der Installer des Registry Cleaners hat eine neue Taskleiste installiert und der Cleaner an sich oder sein Installer hat unbefugt auf die Startseitenoptionen des Nutzers zugegriffen, ohne seine Erlaubnis einzuholen. Diese Probleme existieren mit UWP-Apps nicht mehr.

Schauen wir uns die neuen Apps mal aus der Developer Perspektive an:

Man kann die UWP-Apps sowohl mit den altbekannten .NET Sprachen Visual Basic und C# schreiben, als auch mit C/C++ und ganz neu mit Javascript. Für die visuelle Darstellung wird bei Javascript HTML und CSS benutzt, bei den anderen Sprachen kann man zwischen dem aus WPF und Windows 8 Apps bekannten XAML Format und DirectX wählen. Microsoft vereinfacht mit Javascript Web Developern den Einstieg in die Software Programmierung immens.
Weiterhin gibt es diverse nützliche Neuerungen im Vergleich zu den Windows 8 Apps. Man sucht sich nun eine Zielplattform aus, die eine bestimmte Version des Frameworks haben muss:

Weiterhin kann man mithilfe des Reference Managers in Visual Studio ganz einfach Systemerweiterungen zur App hinzufügen, bspw. Windows.Mobile Erweiterung per one-click der App hinzufügen und prompt wird unsere App von Windows 10 fähigen mobilen Geräten unterstützt.
Die neue Bibliothek Windows.Foundation.Metadata.ApiInformation erleichtert es, hardwarespezifische Funktionen zu integrieren, wie zum Beispiel das ansteuern der Back Taste an einem Windows Phone Gerät. Zu den Neuerungen gehört auch eine Adaptive UI, d.h. ein und die selbe App sieht auf einem Windows Phone Gerät anders aus als auf einem PC. Das System ist vielen bereits vom Web Development bekannt. Einige designspezifische Funktionen sind von Haus aus aktiv, hier Desktop vs. Mobile:

Die Breakpoints, die darüber entscheiden wie der Aufbau einer App aussieht, werden in epx angegeben. Epx steht für effecitv pixels und wird mittels eines Algorithmus anhand der Parameter Userentfernung und Bildschirmgröße ermittelt:

Für XAML Developer gibt es auch ein sehr nützliches Control, das sich Relative Panel nennt. Es ermöglicht einem auf eine einfache Art und Weise die Anordnung von Elementen festzulegen, indem man sie an andere Elemente ausrichten kann:

Das nächste Feature ist wieder für XAML Developer. Es handelt sich um die Split View. Diese ermöglicht das Erstellen von aufklappbaren Menüs, vielen auch unter Burger Menus bekannt. Dieses Control besitzt einen Pane Bereich, den man mithilfe von Radio Buttons zu einem schönen Burger Menu formen kann. Die Splitview hat auch einen Content Bereich, indem man verschiedene XAML Frames darstellen lassen kann.

Mit Windows 10 wurde auch eine Hardware Klasse integriert: Internet Of Things, kurz IOT. Eine abgespeckte Version des Betriebssystem mit Namen Windows IOT kann nun auf verschiedenen Geräten aufgespielt werden. Im Seminar kam ein Raspberry Pi 2 zum Einsatz. Es wurde sehr schön dargestellt, wie die zuvor auf dem Desktop PC laufende App auf dem Raspberry Pi gestartet wurde und wie sich das Design angepasst hat. Weiterhin unterstützt das Windows Core Framework Zugriffe auf die Pins des kleinen Geräts. Somit hat man als erfahrener .NET Developer einen einfachen Einstieg in das Programmieren für IOT Geräte.

Zu guter Letzt geht es um den Windows Store. Dieser wurde bereits in Windows 8 eingeführt und man konnte dort bereits Windows 8 Apps vertreiben. Mit den Universal Apps wurde nun auch der Store überarbeitet. Es gibt nun einen öffentlichen Store, als auch einen Business Store für Firmen. Dies gibt einem die Möglichkeit, Apps spezifisch zu vertreiben als auch andere Finanzierungsmöglichkeiten anzubieten. Man muss nicht mehr einen einfachen Preis für eine App angeben, denn man kann beispielsweise Lizenzen verkaufen, die jährlich erneuert werden müssen.

Wie man sehen kann hat sich Microsoft Gedanken gemacht und ist auf viele Wünsche der User eingegangen. Ob Windows 10 und UWP-Apps sich wirklich durchsetzen werden, wird sich mit der Zeit zeigen. Mir persönlich gefallen die Neuerungen und ich freue mich auf das Experementieren mit den neuen Features.

Alle Bilder stammen aus der Präsentation von dem Seminar, diese könnt ihr hier finden.
Hier noch ein paar nützliche Ressources:
UWP Samples
XAML Samples