Введение в веб -структуры
Дорожная карта
- Обсудите, какие рамки и почему они помогают нам писать приложения
- Изучите различие между фронтовыми фреймворками Backend и CSS
- Узнайте, какие рамки популярны и почему
- Знайте, как принимать решения о том, какие рамки использовать для проектов
Какое приложение вы бы построили?
Если вы не уверены, здесь и здесь есть отличные идеи! Кроме того, потратьте некоторое время на размышления о том, что сделает ваше приложение наиболее успешным. Обсудите свои идеи с людьми за вашим столом.
Сходства веб -приложений
Посмотрите на Facebook, Twitter, LinkedIn и GitHub и перечислите некоторые сходства, которые вы видите с людьми рядом с вами.
Что такое рамки
Если мы посмотрим на пару различных веб -приложений, мы увидим, что есть много дублированных функций. Все те, на которые мы смотрели выше, имеют аутентификацию пользователя, представления, которые рендеринг, они подключаются к базам данных, у них есть профили, на которые вы можете посмотреть, все они имеют стилизованные каналы информации и т. Д. Если бы я хотел, я мог бы написать всю эту логику каждый раз, когда я хочу создавать новое приложение; Тем не менее, есть также много инструментов, которые могут сделать это для нас вместо этого. Кроме того, большую часть времени, когда мы создаем приложения, мы хотим форматировать наш код определенным образом, которые помогают нам быть эффективными и помогают другим разработчикам более легко понять наш код. Веб -фреймворки помогают нам достичь структуры для наших приложений, и они дают нам дополнительные функции, которые мы можем добавить в наши приложения без слишком большой работы. Frameworks дают нам место для начала с наших приложений, чтобы мы могли сосредоточиться на функциях для наших приложений, а не на деталях конфигурации.
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.
от awwwards.
Бэкэнд против фронта
Фронтал веб -приложения - это часть, с которой вы видите и взаимодействуете. Он состоит из веб -дизайна и взаимодействия сайта. С точки зрения языков программирования, это почти всегда состоит из CSS, HTML и JavaScript страницы.
Бэкэнд состоит из сервера, базы данных и кода, который взаимодействует с ними. Это также состоит из кода, который дает динамические данные на передний план сайта. Это может быть обработано в большинстве программирования. Те, которые мы обсудим в основном сегодня, - это Python, Ruby и Node JavaScript, но есть бесчисленное множество других.
Пользовательский интерфейс фреймворки
Пользовательский интерфейс Frameworks помогает создать стилизованные и профессиональные веб -приложения. Большинство из них включают в себя какую -то сетку, чтобы вы могли хорошо выровнять элементы, у них есть цветовые схемы, так что они обрабатываются для вас, и они стилизуют ваши компоненты HTML, чтобы они выглядели чистыми и профессиональными.
Некоторые из них включают в себя:
- Начальная загрузка
- Очень хорошо известен и построен Twitter
- Легко учиться и выглядит профессионально
- Может быть легко заметить "сайты начальной загрузки"
- Может быть трудно настроить компоненты
- Материализуйте
- Чистый вид
- Немного «веселье», чем начальная загрузка
- Много вариантов стиля и цвета
- Следует руководству по стилю материала Google
- Фундамент
- Много примеров
- Профессиональный взгляд
- Семантический интерфейс
- Лоты встроены
- Встроенный в темы, чтобы настраивать
- Натулка
- Огромное внимание уделяется доступности
- Выглядит действительно чисто
- Не так, как некоторые другие
- Сделано для React JS (еще одна структура, на которую мы рассмотрим позже)
Выбор рамки пользовательского интерфейса
Выбор структуры пользовательского интерфейса в основном сводится к личным предпочтениям по внешнему виду и целям сайта. Различные стили могут больше понравиться различным отраслям или могут передавать другое сообщение.
Потратьте несколько минут, обсуждая появления разных и выберите, что лучше всего для вашего приложения.
Frontend Frameworks
- Vue
- Легко учиться
- Очень быстро
- Все инструменты, связанные с ним, хорошо упакованы
- Принимает детали от углова
- менее широко принят, чем некоторые другие
- Гибкий - вы можете использовать его несколькими способами
- Angularjs
- Построен Google
- Хорошо поддерживается
- Огромное количество функций
- Улучшает масштабируемость приложения
- Трудно отлаживать
- Большая кривая обучения
- Угловой 2+
- Построен Google
- Хорошо поддерживается
- Поощряет возможности повторного использования
- Улучшает масштабируемость приложения
- Большая кривая обучения
- Реагировать
- Построен Facebook
- Код фронта пакетов в компоненты
- Организует код и данные, чтобы сделать код более повторно используемым
- Большая кривая обучения
- Имеет некоторые противоречия с его положениями об интеллектуальной собственности
- Эмбер
- Дает большое количество функциональности из коробки
- Самоуверенный (вы должны использовать его форматирование)
- Крутая кривая обучения
Выбор фронтальной структуры
Пройдите через некоторые из них и посмотрите на код. Также изучите плюсы и минусы каждого. Подумайте о том, что лучше всего выучить или интегрироваться в идею вашего приложения.
Бэкэнд -рамки
- Весна MVC
- Java (более сложный язык для изучения)
- Очень быстро
- Менее самоуверенный
- Джанго
- Python (легкий язык для изучения)
- Счастливая среда между тем, чтобы быть очень самоуверенным и менее структурированным
- Дает вам много функциональности из коробки (например, аутентификация пользователя, подключения к базе данных и рендеринг просмотра)
- Может быть трудно интегрировать причудливый фронт.
- Обработка данных Python потрясающая
- Колба
- Python (легкий язык для изучения)
- Менее самоуверенный и более настраиваемый, чем Джанго
- Дает вам меньше из коробки (вы должны построить больше)
- Руби на рельсах
- Руби (легкий язык для изучения)
- Очень самоуверенный
- Имеет отличные инструменты, такие как леса, так что вы можете быстро строить вещи
- Дает вам много функциональности из коробки (например, аутентификация пользователя, подключения к базе данных и рендеринг просмотра)
- Трубопровод активов помогает в разработке фронта
- Руби занимает больше времени для запуска программ, чем некоторые другие языки программирования
- Метеор
- JavaScript (более легкий язык для изучения)
- Дает вам много функциональности из коробки (например, аутентификация пользователя, подключения к базе данных и рендеринг просмотра)
- Очень хорошо интегрируется с современными фронталами
- Выражать
- JavaScript (более легкий язык для изучения)
- Очень настраиваемый
- Очень легкий
- Менее встроенные функции
- Узел очень быстрый
Выбор бэкэнд -рамки
Пройдите через некоторые из них и посмотрите на код. Также изучите плюсы и минусы каждого. Подумайте о том, что лучше всего выучить или интегрироваться в идею вашего приложения.
Больше ресурсов!
- Учебное пособие по девочкам Джанго
- Кодовая академия
- ToDomvc
- Codenewbie Podcast
- Женщины, которые кодируют DC
- Насколько быстро разные языки программирования?
Оставайся на связи!
- aspittel.github.io
- @Aspittel в Твиттере
- Аситтель на GitHub
- Али Шпиттель на LinkedIn