Introduction aux cadres Web
Carte routière
- Discutez des cadres et pourquoi ils nous aident à rédiger des applications
- Apprenez la distinction entre les cadres Frontend, Backend et CSS
- Apprenez quels frameworks sont populaires pour l'instant et pourquoi
- Savoir comment prendre des décisions sur les cadres à utiliser pour les projets
Quel type d'application construiriez-vous?
Si vous n'êtes pas sûr, ici et ici, ayez de bonnes idées! Passez également du temps à réfléchir à ce qui ferait le succès de votre application. Discutez de vos idées avec les gens à votre table.
Similitudes d'application Web
Regardez Facebook, Twitter, LinkedIn et Github et énumérez certaines des similitudes que vous voyez avec les gens près de chez vous.
Que sont les frameworks
Si nous regardons quelques applications Web différentes, nous pouvons voir que la zone de fonctions de fonctions dupliquée. Tous ceux que nous avons examinés ci-dessus ont une authentification des utilisateurs, des vues qui rendent, elles se connectent aux bases de données, ils ont des profils que vous pouvez regarder, ils ont tous des flux d'informations stylisés, etc. Si je le voulais, je pourrais écrire toute cette logique chaque fois que je veux créer une nouvelle application; Cependant, il existe également de nombreux outils disponibles qui peuvent le faire pour nous à la place. De plus, la plupart du temps, lorsque nous créons des applications, nous voulons formater notre code de certaines manières qui nous aident à être efficaces et à aider d'autres développeurs à comprendre plus facilement notre code. Les cadres Web nous aident à atteindre la structure de nos applications, et ils nous donnent des fonctionnalités supplémentaires que nous pouvons ajouter à nos applications sans trop de travail supplémentaire. Les cadres nous donnent un point de départ avec nos applications afin que nous puissions nous concentrer sur les fonctionnalités de nos applications plutôt que sur les détails de configuration.
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.
de Awwwards.
Backend vs frontend
Le frontend d'une application Web est la partie avec laquelle vous voyez et interagir. Il se compose de la conception Web et de l'interaction du site. En termes de langages de programmation, cela est presque toujours composé du CSS, du HTML et du JavaScript de la page.
Le backend se compose du serveur, de la base de données et du code qui interagit avec eux. Cela se compose également du code qui donne des données dynamiques au frontend du site. Cela peut être géré dans la plupart des langues de programmation. Ceux dont nous allons discuter principalement aujourd'hui sont Python, Ruby et Node JavaScript, mais il y en a d'innombrables autres.
Frameworks d'interface utilisateur
Les cadres d'interface utilisateur aident à créer des applications Web stylisées et professionnelles. La plupart incluent une sorte de système de grille afin que vous puissiez bien aligner les éléments, ils ont des schémas de couleurs afin que cela soit géré pour vous, et ils stylisent vos composants HTML afin qu'ils aient l'air propres et professionnels.
Certains d'entre eux incluent:
- Amorce
- Très bien connu et construit par Twitter
- Facile à apprendre et à paraître professionnel
- Peut être facile de repérer les "sites bootstrap"
- Peut être difficile à personnaliser les composants
- Se concrétiser
- Propre
- Un peu plus "amusant" que bootstrap
- Beaucoup d'options de style et de couleur
- Suit le guide de style matériel de Google
- Fondation
- Beaucoup d'exemples
- À la recherche professionnelle
- UI sémantique
- Beaucoup intégrés
- Thèmes intégrés pour que ce soit personnalisable
- Broyeur
- A une énorme concentration sur l'accessibilité
- Ça a l'air vraiment propre
- Pas aussi utilisé que certains des autres
- Fabriqué pour React JS (un autre cadre que nous examinerons plus tard)
Choisir un cadre d'interface utilisateur
Le choix d'un cadre d'interface utilisateur se résume principalement à une préférence personnelle en apparence et aux objectifs du site. Les différents styles peuvent plaire à différentes industries ou peuvent transmettre un message différent.
Passez quelques minutes à discuter des apparences de différentes et choisissez ce qui serait le mieux pour votre exemple d'application.
Cadres de frontend
- Vue
- Facile à apprendre
- Très rapide
- Tous les outils qui y sont associés sont bien emballés
- Prend des pièces d'Angular et réagit et les optimise
- moins largement adopté que d'autres
- Flexible - vous pouvez l'utiliser de plusieurs manières
- Angularjs
- Construit par Google
- Bien soutenu
- Grand nombre de fonctionnalités
- Améliore l'évolutivité de l'application
- Difficile à déboguer
- Grande courbe d'apprentissage
- Angular 2+
- Construit par Google
- Bien soutenu
- Encourage la réutilisabilité
- Améliore l'évolutivité de l'application
- Grande courbe d'apprentissage
- Réagir
- Construit par Facebook
- Bundles Frontend Code en composants
- Organise le code et les données pour rendre le code plus réutilisable
- Grande courbe d'apprentissage
- A une certaine controverse avec ses clauses de propriété intellectuelle
- Bilan
- Donne une grande quantité de fonctionnalités hors de la boîte
- Opinion sur (vous devez utiliser son formatage)
- Courbe d'apprentissage abrupte
Choisir un cadre frontal
Parcourez certains d'entre eux et regardez le code. Recherchez également les avantages et les inconvénients de chacun. Pensez à ce qui serait le mieux appris ou à intégrer dans votre idée d'application.
Cadres backend
- MVC de printemps
- Java (un langage plus difficile à apprendre)
- Très rapide
- Moins d'opinion
- Django
- Python (langue plus facile à apprendre)
- Joyeux médium entre être très avisé et moins structuré
- Vous donne beaucoup de fonctionnalités hors de la boîte (comme l'authentification des utilisateurs, les connexions de la base de données et le rendu de la vue)
- Peut être difficile pour intégrer un frontend sophistiqué.
- La gestion des données de Python est incroyable
- Ballon
- Python (langue plus facile à apprendre)
- Moins d'opinion et plus personnalisable que Django
- Vous donne moins de la boîte (vous devez construire plus)
- Ruby sur les rails
- Ruby (un langage plus facile à apprendre)
- Très avisé
- A d'excellents outils comme l'échafaudage pour que vous puissiez construire des choses rapidement
- Vous donne beaucoup de fonctionnalités hors de la boîte (comme l'authentification des utilisateurs, les connexions de la base de données et le rendu de la vue)
- Le pipeline des actifs aide au développement du frontend
- Ruby met plus de temps à exécuter des programmes que certains autres langages de programmation
- Météore
- Javascript (langage plus facile à apprendre)
- Vous donne beaucoup de fonctionnalités hors de la boîte (comme l'authentification des utilisateurs, les connexions de la base de données et le rendu de la vue)
- S'intègre très bien aux fronts modernes
- Exprimer
- Javascript (langage plus facile à apprendre)
- Très personnalisable
- Très léger
- Caractéristiques moins intégrées
- Le nœud est très rapide
Choisir un framework backend
Parcourez certains d'entre eux et regardez le code. Recherchez également les avantages et les inconvénients de chacun. Pensez à ce qui serait le mieux appris ou à intégrer dans votre idée d'application.
Plus de ressources!
- Tutoriel des filles Django
- Académie de code
- Todomvc
- Podcast Codenewbie
- Les femmes qui codent DC
- À quelle vitesse sont-elles différents langages de programmation?
Rester en contact!
- aspittel.github.io
- @aspittel sur Twitter
- aspittel sur github
- Ali Spittel sur LinkedIn