Это статья об изменениях, которые произошли в мире веб-разработки. Я наблюдаю огромное количество веб-разработчиков, которые буквально застряли в устаревших технологиях, особенно в мире .NET. Если вы еще не начали совершенствовать свои навыки, и адаптироваться к изменяющимся трендам, вы должны начинать уже сегодня.Поставьте цель разрабатывать ваши веб-приложения правильно. В вашем распоряжении много статей и книг, как никогда раньше. Появилось как никогда много интернет ресурсов, которые могут упростить и ускорить процесс разработки. Итак, вот те 6 вещей, которые вы должны знать и использовать чтобы оставаться востребованным веб-разработчиком, и быть лучшим в своей сфере.
1 – Улучшайте качество кода (JavaScript и CSS)
Если вы не пишете грамотный HTML и CSS, вам не выжить.
- Изучите все основные возможности JavaScript
- Затем приступайте к продвинутым возможностям языка
- Как только вы будете чувствовать себя уверенно в чистом JS ознакомьтесь с языками более высокого уровня абстракции, например CoffeeScript или TypeScript. Совершенствуйте использование необходимых JavaScript библиотек, вот список минимально необходимых:
- JQuery – Вы ведь уже давно его выучили, да?
- Require.js — JavaScript загрузчик файлов и модулей.
- Underscore.js – отличная библиотека утилит
- modernizr – детектор поддержки возможностей HTML/CSS браузерами.
- history.js – эмуляция HTML history API, работа с историей браузера.
И вот еще немного:
- Полезные JavaScript библиотеки и плагины JQuery
- Crockford’s Javascript Resources
- Попробуйте TypeScript, особенно если вы часто используете в работе Microsoft .NET.
- Что касается CSS, ознакомьтесь с расширениями SASS или Less, пробегитесь по техникам CSS3, следите за поддержкой возможностей CSS3 различными браузерами. Уясните концепции адаптивного дизайна и начните использовать media queries.
2 – Создавайте адаптивный дизайн
Сегодня все больше и больше трафика потребляется с помощью мобильных устройств, поэтому большинство веб-сайтов по умолчанию должны выглядеть хорошо на устройствах любого форм-фактора. Если вам как и мне некогда создавать все эти веб-страницы используя media queries, облегчите свою жизнь. Освойте фреймворки адаптивного дизайна.
Адаптивный дизайн (Responsive Web Design, RWD) это подход к веб-дизайну когда сайт разрабатывается чтобы обеспечить оптимальный вид — легкось чтения и навигации без использования увеличения, поворота устройства, и прокрутки — для широкого круга устройств (от монитора до мобильных устройств)
Лично я пользуюсь Twitter Bootstrap и Zurb’s Foundation. Я очень долго работаю с Bootstrap, и приятно удивлен фишками Foundation.
Обязательно к прочтению:
- Responsive Web Design by Ethan Marcotte
- Comparison of Responsive CSS Frameworks
3 – Изучите наиболее полезные JavaScript MVC фреймворки
Станьте первоклассным JavaScript разработчиком. Имеется множество Javascript MVC фреймворков для клиентской части, но выучите хотя бы 5 (Да, по меньшей мере 5). Я собрал для вас стартовую подборку.
Чтобы сравнить и сопоставить их возможности, посмотрите на TodoMVC – очень крутая и полезная штука. Это проект, который создан чтобы помочь вам сделать выбор из зоопарка MVC фреймворков, в зависимости от ваших целей.
4 – Разберитесь в работе REST и HTTP
Вы должны понимать как работают веб-службы Restful и профессионально владеть созданием и управлением серверной частью сайта. К примеру, пользуйтесь Node.js. Если вы используете .NET, начните с Web APIs. Более того, разберитесь как работает REST. Потратьте время на изучение Hypermedia. Не останавливайтесь на теории, выполните несколько примеров. А затем, обьедините ваши знания REST веб-сервисов с одним из упомянутых выше MVC фреймворков, и сделайте какой-нибудь проект с использованием этих технологий. Используйте правильные HTTP запросы.
Обязательно к прочтению:
- WOA is here to stay
- Richardson Maturity Model – статья от Мартина Фаулера
- REST in Practice
- Hypermedia and Forms
Эти статьи сойдут для начала. Также, обратите внимание на готовые реализации например Meteor, SignalR.
5 – Будущее за HTML5
Стандарт HTML5 очень динамично развивается, но многое уже утверждено. Наряду с разработкой сайтов, HTML5 предоставляет множество контейнеров (например PhoneGap и т.д.) которые позволяют упаковывать ваши приложения в браузер — контейнеры для мобильный устройств (так называемые гибридные приложения), для распространения их как нативных приложений через привычные каналы дистрибуции.
HTML5 это язык разметки для структурирования и представления контента в сети и явлется основной технологией Интернета. Это пятая ревизия стандарта HTML (создан в 1990 и стандартизирован как HTML4 в 1997) и, по состоянию на ноябрь 2012, находится в разработке.Основной целью является улучшить язык, добавив поддержку современного медиа-контента с сохранением читабельности кода людьми и стабильно распознаваемым компьютерами и др. устройствами (веб-браузеры, парсеры, и т.д.).
Есть много классных статей по HTML5:
- Пошаговое руководство от Nettuts с примерами
- Статья в журнале Smashing — отличная отправная точка для понимания философии современного дизайна.
- Топ-25 возможностей HTML5
Ознакомьтесь с самыми полезными и впечатляющими HTML5 Javascript API и преимуществами языка. Обратите внимание на Web Sockets, Application Cache, Canvas API, Vide/Audio и т.д. Начните для начала с какого-нибудь популярного шаблона, можете использовать для создания шаблонов, например Initializr.
Ищите в этих технологиях то, что вам реально пригодится в работе.
- Несколько примеров использования возможностей HTML5
- Пользуйтесь чем-то вроде html5please или CanIUse, они помогут вам быть в курсе последних изменений в стандарте, которые вы можете использовать, для улучшения вашего дизайна.
- Также, посмотрите, как большие игроки рынка используют HTML5 как платформу для построения кросс-платформенных гибридных приложений — не только для web, а и для десктопов и мобильных устройств.
- Google Chrome Packaged Applications
- Firefox OS
6 – Оптимизируйте
Оптимизируйте все, что вы делаете, во время разработки, и по окончании ее.
- Структурируйте и улучшайте ваш CSS и Javascript код.
- Пользуйтесь инструментами инспекции кода вашей страницы, и проверяйте производительность JavaScript
- Google Chrome’s speed tracer
- YSlow
- Когда необходимо, мониторьте сетевой трафик, это может понадобиться в любое время – для этого попробуйте инструменты вроде Fiddler
- Пользуйтесь полезными сервисами, например Screenfly для проверки отображения веб-страницы на устройствах разного форм-фактора
- Используйте симуляторы, например Ripple чтобы проверить поведение вашего веб-сайта на мобильных устройствах.
Ну вот и все, я закончил с советами. Можете садиться за чтение, и начинать совершенствоваться, желаю вам успехов.
Перевод статьи Anoop Madhusudanan «Changing Times For Web Developers – 6 Tips You Should Read To Survive»
