Einführung in Web -Frameworks
Straßenkarte
- Besprechen Sie, was Frameworks sind und warum sie uns helfen, Anwendungen zu schreiben
- Erfahren Sie die Unterscheidung zwischen Frontend-, Backend- und CSS -Frameworks
- Erfahren Sie, welche Frameworks vorerst beliebt sind und warum
- Wissen Sie, wie Sie Entscheidungen treffen, welche Frameworks für Projekte verwendet werden sollen
Welche Art von App würden Sie erstellen?
Wenn Sie sich nicht sicher sind, haben Sie hier und hier einige tolle Ideen! Verbringen Sie auch einige Zeit damit, darüber nachzudenken, was Ihre App am erfolgreichsten machen würde. Besprechen Sie Ihre Ideen mit den Menschen an Ihrem Tisch.
Ähnlichkeiten der Webanwendungen
Schauen Sie sich Facebook, Twitter, LinkedIn und Github an und listen Sie einige der Ähnlichkeiten auf, die Sie mit den Menschen in Ihrer Nähe sehen.
Was sind Frameworks
Wenn wir uns ein paar verschiedene Webanwendungen ansehen, können wir sehen, dass es eine Menge doppelter Funktionen gibt. Alle oben, die wir oben betrachteten, haben die Benutzerauthentifizierung, Ansichten, die sich rendern, sie verbinden sich zu Datenbanken. Sie haben Profile, die Sie betrachten können. Sie alle haben stilisierte Informationen zu Informationen usw. Wenn ich wollte, könnte ich all diese Logik selbst schreiben, wenn ich eine neue Anwendung erstellen möchte. Es gibt jedoch auch viele Tools, die dies stattdessen für uns tun können. Darüber hinaus möchten wir viel Zeit, wenn wir Anwendungen erstellen, unseren Code auf bestimmte Weise formatieren, die uns helfen, effizient zu sein und anderen Entwicklern unseren Code leichter zu verstehen. Web -Frameworks helfen uns, Struktur für unsere Anwendungen zu erreichen. Sie bieten uns zusätzliche Funktionen, die wir zu unseren Anwendungen hinzufügen können, ohne zu viel zusätzliche Arbeit. Frameworks bieten uns einen Ort, an dem wir mit unseren Anwendungen beginnen können, damit wir uns eher auf Funktionen für unsere Anwendungen als auf Konfigurationsdetails konzentrieren können.
Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.
To summarize: there’s no need to reinvent the wheel.
von awwwards.
Backend gegen Frontend
Die Frontend einer Webanwendung ist der Teil, mit dem Sie sehen und mit dem Sie interagieren. Es besteht aus dem Webdesign und der Interaktion der Website. In Bezug auf die Programmiersprachen besteht dies fast immer aus CSS, HTML und JavaScript der Seite.
Das Backend besteht aus dem Server, der Datenbank und dem Code, der mit ihnen interagiert. Dies besteht auch aus dem Code, der dem Frontend der Site dynamische Daten gibt. Dies kann in den meisten programmierenden Langues behandelt werden. Diejenigen, die wir heute hauptsächlich besprechen werden, sind Python, Ruby und Node JavaScript, aber es gibt unzählige andere.
Benutzeroberfläche Frameworks
Benutzeroberflächenframeworks können stilisierte und professionell aussehende Webanwendungen erstellen. Die meisten enthalten eine Art Netzsystem, damit Sie Elemente gut ausgerichtet haben können, sie haben Farbschemata, so dass für Sie behandelt wird, und sie stylieren Ihre HTML -Komponenten, damit sie sauber und professionell aussehen.
Einige davon sind:
- Bootstrap
- Sehr bekannt und von Twitter gebaut
- Leicht zu lernen und sieht professionell aus
- Kann leicht "Bootstrap -Sites" erkennen sein.
- Kann es schwierig sein, Komponenten anzupassen
- Materialisieren
- Sauber aussehen
- Ein bisschen mehr "Spaß" als Bootstrap
- Viele Styling- und Farboptionen
- Befolgt Googles Handbuch für den Materialstil
- Stiftung
- Viele Beispiele
- Professionell aussehend
- Semantische UI
- Viele eingebaut
- Eingebaute Themen so anpassbar
- Grommet
- Hat einen großen Fokus auf Zugänglichkeit
- Sieht wirklich sauber aus
- Nicht so verwendet wie einige der anderen
- Made für React JS (ein weiterer Rahmen werden wir uns später ansehen)
Auswahl eines UI -Frameworks
Die Auswahl eines UI -Frameworks hängt hauptsächlich für die persönliche Präferenz im Erscheinungsbild und die Ziele der Website ab. Die verschiedenen Stile können verschiedene Branchen mehr ansprechen oder eine andere Botschaft vermitteln.
Verbringen Sie ein paar Minuten damit, die Erscheinungen verschiedener zu diskutieren, und wählen Sie, welches für Ihre Beispiel -App am besten geeignet ist.
Frontend -Frameworks
- Vue
- Leicht zu lernen
- Sehr schnell
- Alle damit verbundenen Werkzeuge sind gut verpackt
- Nimmt Teile von Angular und reagiert und optimiert sie
- weniger weit verbreitet als einige andere
- Flexibel - Sie können es auf verschiedene Arten verwenden
- Angularjs
- Erstellt von Google
- Gut unterstützt
- Große Anzahl von Funktionen
- Verbessert die Anwendungsskalierbarkeit
- Schwer zu debuggen
- Große Lernkurve
- Winkel 2+
- Erstellt von Google
- Gut unterstützt
- Fördert die Wiederverwendbarkeit
- Verbessert die Anwendungsskalierbarkeit
- Große Lernkurve
- Reagieren
- Gebaut von Facebook
- Bündel Frontend -Code in Komponenten
- Organisiert Code und Daten, um Code wiederverwendbarer zu machen
- Große Lernkurve
- Hat einige Kontroversen mit seinen geistigen Eigentumsklauseln
- Glut
- Gibt eine große Menge an Funktionalität außerhalb der Box
- Meinung (Sie müssen seine Formatierung verwenden)
- Steile Lernkurve
Auswahl eines Frontend -Frameworks
Gehen Sie einige davon durch und schauen Sie sich den Code an. Erforschen Sie auch die Vor- und Nachteile der einzelnen. Überlegen Sie, welches am besten lernen oder in Ihre App -Idee integriert werden.
Backend -Frameworks
- Frühlings -MVC
- Java (schwieriger zu lernen)
- Sehr schnell
- Weniger Meinung
- Django
- Python (einfachere Sprache zu lernen)
- Glückliches Medium zwischen sehr Meinung und weniger strukturiert
- Gibt Ihnen eine Menge Funktionen außerhalb des Box (wie Benutzerauthentifizierung, Datenbankverbindungen und Ansichtsrendern)
- Kann schwierig sein, ein ausgefallenes Frontend zu integrieren.
- Pythons Datenhandling ist erstaunlich
- Flasche
- Python (einfachere Sprache zu lernen)
- Weniger Meinung und anpassbarer als Django
- Gibt Ihnen weniger aus der Schachtel (Sie müssen mehr bauen)
- Rubin auf Schienen
- Ruby (einfachere Sprache zu lernen)
- Sehr aufmerksam
- Hat tolle Werkzeuge wie Gerüste, damit Sie die Dinge schnell bauen können
- Gibt Ihnen eine Menge Funktionen außerhalb des Box (wie Benutzerauthentifizierung, Datenbankverbindungen und Ansichtsrendern)
- Die Asset -Pipeline hilft bei der Frontend -Entwicklung
- Ruby braucht länger, um Programme auszuführen als einige andere Programmiersprachen
- Meteor
- JavaScript (einfachere Sprache zu lernen)
- Gibt Ihnen eine Menge Funktionen außerhalb des Box (wie Benutzerauthentifizierung, Datenbankverbindungen und Ansichtsrendern)
- Integriert sehr gut in moderne Frontenden
- Äußern
- JavaScript (einfachere Sprache zu lernen)
- Sehr anpassbar
- Sehr leicht
- Weniger gebaute Merkmale
- Knoten ist sehr schnell
Auswahl eines Backend -Frameworks
Gehen Sie einige davon durch und schauen Sie sich den Code an. Erforschen Sie auch die Vor- und Nachteile der einzelnen. Überlegen Sie, welches am besten lernen oder in Ihre App -Idee integriert werden.
Weitere Ressourcen!
- Django Girls Tutorial
- Code Academy
- Todomvc
- Codenewbie Podcast
- Frauen, die DC codieren
- Wie schnell sind verschiedene Programmiersprachen?
Bleib in Kontakt!
- Aspittel.github.io
- @aspittel auf Twitter
- Aspittel auf GitHub
- Ali Spittel auf LinkedIn