Веб-разработка сейчас находится на пике популярности, особенно с появлением веб-компонентов. Это было самое умное обновление для Интернета с тех пор, как вышел Bootstrap, и оно повышает производительность, как феникс из пламени.
Введение в веб-компоненты
Итак, что такое веб-компоненты? Позвольте мне объяснить это максимально просто: я написал код для отображения кнопки Twitter Follow, как показано выше. Я обычно добавляю эту кнопку на все свои веб-сайты, но она не обязательно должна указывать на одну и ту же учетную запись — у меня может быть личная учетная запись Twitter и корпоративная учетная запись Twitter на двух разных сайтах. Если бы мне пришлось создать другой сайт, мне пришлось бы скопировать код со старого сайта, изменить необходимые теги и использовать его на этом сайте.
Но с помощью веб-компонентов вы можете так же легко создать компонент этой кнопки Twitter Follow и использовать его на любом количестве веб-сайтов, просто импортировав его через bower или npm. В чем прелесть этого? Вы можете поделиться своим компонентом со всем миром, используя GitHub, чтобы другие могли просто взять его, подключить к своему веб-сайту и начать настраивать с ним, например, связать его со своим именем пользователя. Вы будете поражены количеством компонентов, которые уже доступны, большинство из них от Google.
Введение в полимер
Polymer — это фреймворк для веб-компонентов от Google. Я думаю, что достаточно вступления? По сути, поскольку это от Google, мы можем ожидать хорошей поддержки от его собственных разработчиков, а также отличной поддержки своих собственных сервисов, таких как Firebase и множество API Google. Кроме того, элементы, доступные в Polymer, соответствуют стандартам Material Design, которые были самой минималистичной и широко распространенной тенденцией дизайна со времен… ну, со времен цвета.
Итак, почему Полимер? Если вы занимаетесь веб-разработкой, возможно, вы слышали о фреймворках: AngularJS, ReactJS, EmberJS, MeteorJS, VueJS… Ого, сколько JS. По сути, все эти фреймворки создаются или разрабатываются с учетом концепции веб-компонентов, но с Polymer вы получаете множество простоты и стандартов дизайна. Он следует материальному дизайну, и это была единственная причина, по которой Polymer превосходил все остальные. Не может быть *одной* структуры, которая управляла бы ими всеми.
В веб-разработку сейчас немного сложно погрузиться только из-за путаницы с таким количеством доступных фреймворков, но важно помнить, что все они следуют шаблону MVC, все они построены на Javascript, и если вы выучил один, ты выучил их все. Перестаньте выбирать фреймворк и начните уже строить его.
Давайте начнем?
Я верю в преподавание на собственном примере, так что это будет *вероятно* ваш первый проект на Polymer. Следуйте по блокам кода, и если вы где-то застряли, оставьте комментарий ниже:
Шаг 1: Установите NodeJS, NPM и Bower
Чтобы начать установку Polymer, вам понадобится NodeJS. Возможно, вы слышали об этом удивительном исполнителе Javascript на стороне сервера. На самом деле мы не собираемся работать с NodeJS, так что успокойте своих лошадей. На самом деле мы собираемся использовать что-то под названием Node Package Manager (NPM), которое поставляется с NodeJS, для установки многих наших крутых компонентов.
Вы спрашиваете, как установить NodeJS? Просто перейдите по следующей ссылке и получите последнюю версию (v7+): https://nodejs.org/en/. Он загрузит версию, соответствующую вашей операционной системе и архитектуре процессора.
После установки NodeJS убедитесь, что у вас установлены Node и NPM, выполнив следующие команды в командной строке или терминале:
node --version v7.1.0 npm --version v3.10.9
Если вы получите вывод, аналогичный приведенному выше, дайте себе куки! ☺
Как установить Bower? С этого момента все станет намного проще, поскольку на вашем компьютере установлен npm. Позвольте мне показать вам, как вы можете установить Bower, эксклюзивный веб-менеджер пакетов компонентов, с помощью всего одной команды:
npm install -g bower
Если это не сработало, возможно, вам нужно запустить командную строку от имени администратора. На терминалах Mac/Linux вам нужно добавить к команде префикс sudo, чтобы она работала с привилегиями суперпользователя:
sudo npm install -g bower
Для любых будущих команд/кода, которые вы увидите в этом посте, с npm install просто предположите, что вам потребуется либо использовать командную строку с правами администратора, либо префикс sudo на вашем терминале UNIX.
Шаг 2: Установите Polymer-CLI
npm install -g polymer-cli
Это установит инструмент командной строки Polymer глобально в вашей системе, так что вы сможете начать использовать генератор polymer из любой точки вашей системы. После установки вы можете запускать такие команды, как:
polymer init - this creates a new polymer project polymer serve - this runs a local server to showcase your project polymer test - this runs any test cases you might have written for your project
Мы будем использовать эти команды через некоторое время, но давайте рассмотрим одно препятствие за раз. Итак, чтобы убедиться, что у вас есть Polymer в вашей системе глобально, просто выполните следующую команду:
polymer --version 0.17.0
Шаг 3: Создайте свой первый полимерный проект
Это будет намного проще, чем вы думаете. Все, что вам нужно сделать, чтобы построить ваш новый проект Polymer, это выполнить следующие команды:
mkdir new-app - creates a new directory called 'new-app' cd new-app - changes the directory to 'new-app' polymer init - runs the Polymer CLI to initialize a new app
После запуска polymer init вы увидите следующие четыре параметра:
1) element - A blank element template 2) application - A blank application template 3) shop - The "Shop" Progressive Web App demo 4) starter-kit - A starter application template, with navigation and "PRPL pattern" loading
Каждый из четырех вариантов говорит сам за себя, но я дам вам краткое изложение всех четырех вариантов, с примерами скриншотов:
1) Элемент
Это лучший вариант для тех, кто решил создать свой собственный веб-компонент. Вам просто нужно создать свое представление и обеспечить функциональность, а Polymer позаботится о скучной документации и демонстрационной работе, чтобы вы могли больше сосредоточиться на выпуске своего компонента в дикую природу.
2) Применение
Это самое простое, что может быть в Polymer Project: никакого CSS, никакого. По сути, это пустой шаблон Hello, World для тех, кто достаточно смел, чтобы бегать без обуви. Это отлично подходит для понимания того, как работает Polymer на самом простом уровне, и скоро я расскажу о пустом шаблоне.
3) Магазин
Это полная противоположность пустому приложению, которое вы видели раньше… Shop создает полноценный веб-сайт для покупок, и при этом довольно привлекательный, в комплекте с оплатой, адаптивным дизайном, несколькими продуктами и категориями и буквально всем, что вы пожелаете. на персональном веб-сайте магазина.
Но не дайте мне просто одурачить вас словами, полюбуйтесь на скриншоты:
4) Полимерный стартовый комплект
Это тот, над которым мы будем работать, потому что он занимает промежуточное положение между пустым шаблоном приложения и шаблоном магазина. (PSK) формирует одностраничное приложение с несколькими представлениями и несколькими компонентами материального дизайна. Может быть, я немного противоречил сам себе, но вы можете понять это яснее, когда посмотрите на скриншоты:
Итак, как я уже сказал, мы начнем с удивительного Starter Kit, с которым поставляется Google Polymer, поэтому просто выберите параметр 4) starter-kit в меню polymer init и дождитесь загрузки пакетов.
После загрузки стартового комплекта просто запустите следующую команду, которая создаст локальный веб-сервер, который позволит вам продемонстрировать ваше приложение, а также открыть его в браузере по умолчанию:
polymer serve --open
Это запустит ваш браузер по умолчанию, чтобы открыть веб-сайт, очень похожий на тот, который вы видели на скриншотах выше. Просто поэкспериментируйте с этим некоторое время и проверьте, как круто работают анимации и переходы из разных представлений. Прелесть использования Polymer Elements в том, что все они имеют встроенные в них анимации и переходы, что означает меньше работы над дизайном и больше работы с серверной частью для веб-разработчика.
Это все люди!
Теперь, для некоторых людей, возможно, было слишком сложно работать с совершенно новым фреймворком прямо ни с того ни с сего и даже не знать ни одной строки Javascript или HTML, но в этом прелесть этого урока и всех фреймворков. там прямо сейчас. Вы можете изучить их на ходу.
Для тех, кто считает, что это было слишком мало контента для начала, пожалуйста, потерпите меня, пока я пишу больше руководств для этого удивительного фреймворка. Это мой самый первый учебник, поэтому мне очень не терпится узнать, какие ошибки я допустил, какие части обучения я могу улучшить, и, по существу, с вашей поддержкой и критикой, я надеюсь, что мы оба можно расти и учиться ☺
Большое спасибо всем за то, что вы так далеко продвинулись в этом руководстве, подписывайтесь на меня в Facebook или Twitter.
До следующего раза
