- PVSM.RU - https://www.pvsm.ru -

Времена меняются для веб-разработчиков — 6 советов чтобы выжить

image

Контекст данного поста об изменениях для веб-разработчиков, я вижу многих разработчиков которые «застряли», особенно в .NET.
Если вы еще не начали совершенствоваться в Вашем искусстве и адаптироваться к изменяющимся трендам, вы должны начать это делать сегодня.

Подумайте о разработке веб-приложений должным образом. Используйте здравый смысл чтобы смешивать и сочетать основываясь на данных советах.
А теперь 6 советов для веб-разработчиков, чтобы оставаться на пике того что вы делаете.

1 — Учимся писать лучше Javascript и CSS

Если Вы не владеете совершенным JS и CSS — Вы покойник.

Познакомьтесь с более высоким уровнем абстракции языка, чтобы писать Javascript, после того как вы освоили базовый Javascript:
CoffeeScript или TypeScript.

Кроме того, осваивайте распространенные Javascript библиотеки:

  • JQuery [3] — Вы должны быть уже знакомы. Разве нет?
  • Require.js [4] — файловый/модульный загрузчик.
  • Underscore.js [5] — невероятно удобная JavaScript библиотека.
  • modernizr [6] — узнаёт, что из HTML5 и CSS3 умеет браузер пользователя
  • history.js [7] — History State/APIs

так же:

и еще, начните изучать TypeScript, если вы используете Microsoft technology/C# background.

На CSS стороне, осваивайте SASS [10] и/или Less [11] — бегло CSS3 техники [12],
следите за поддержка CSS3 свойств в браузерах [13]. Понимание адаптивной верстки и и использование media запросов [14].

2 — Знакомство с Responsive frameworks

В настоящее время, использования веба все более и более на мобильных устройствах, так что все больше ожиданий для вебсайтов, увидеть их поддержку для различных разрешений по умолчанию.

Если вы не хотите постоянно использовать media запросы, лучше ознакомьтесь с несколькими Responsive framework.

Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре разрешений

Мое личное предпочтение Twitter Bootstrap [15] и Zurb’s Foundation [16].
Я сделал довольно много работ с Bootstrap, и я впечатлен возможностями.

Важно прочесть:

3 — Изучение часто используемых Javascript MVC фреймворков

Быть первоклассным Javascript-разработчиком. Существует масса Javascript MVC фремворков [19] для разработки на стороне сервера, но ознакомьтесь по крайней мере с пятью:

Чтобы сравнить и сопоставить их, посмотрите на TodoMVC [26] — Я нашел это довольно полезным.

Проект, который предлагает то же самое Todo приложение, реализован с использованием MVC концепции в большинстве популярных JavaScript MVC frameworks сегодня.

4 — Понимание REST и HTTP

Поймите Restful сервисы и осваивайте server-side технологии.
К примеру, Node.js [27].
Если вы в .NET, начните с Web APIs [28].
Более того, понимание свойств REST. Понимание Hypermedia. Свяжите Ваши REST сервисы с одной из вышеупомянутых MVC и создайте что-то полезное.

обязательно к прочтению:

Эти статьи должны помочь для старта. Кроме того, следите за выполнением, таких как Meteor, SignaIR и т.д,
которые могут использовать Web Sockets [33],
как только они будут готовы.

5 — Поймите HTML5 Beyond the Buzzword

HTML5 стандарты пока не утверждены и остаются в прогрессе, но это не мешает их повсеместной адаптации. Во время разработки сайтов,
доступно много интересных инструментов для разработки (таких как Phonegap), это позволит Вам сжимать Ваши браузерные HTML5 приложения, к примеру в приложение
для мобильных устройств (гибридные приложения), и распространять их так же много, как родные.

HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Это пятая версия HTML-стандарта (изначально созданного в 1990 году и последней версией которого являлся HTML4, стандартизированный в 1997 году[1]) и находится в стадии разработки по состоянию на ноябрь 2012 года. Основной её целью является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений

Есть много хороших статей о HTML5:

Познакомьтесь с наиболее полезными и интересными HTML5 Javascript APIs и функциями. Такие как Web Sockets, Application Cache, Canvas API, Vide/Audio и др.
Начните использовать HTML5 boiler plate в качестве базового. www.initializr.com/ [37]

Обзор HTML5 свойств [38]
Используйте что то наподобие http://html5please.com/ [39] или CanIUse [40],
оставайтесь в курсе обновления HTML5 свойств, которые можно использовать для улучшения прецедентов на основе требований

Также следите за крупными игроками которые используют HTML5 в качестве платформы для построения кросс-платформенных гибридных приложений — не только веб-сайтов, а также для настольных и мобильных.

6 — Оптимизация

Оптимизируйте все что Вы разрабатываете, оптимизируйте когда Вы готовы.

Используйте некоторые инструменты для разработчиков чтобы исследовать Вашу и страницу и проверять Javascript производительность

Проверьте ваш сетевой трафик, когда это требуется. Познакомьтесь с таким инструментом как Fiddler [46]

Используйте инструменты, такой как Screenfly [47] чтобы проверить экран для различных разрешений и форм экрана.
Используйте симуляторы, подобные Ripple [48] для проверки поведения Ваших сайтов на мобильных устройствах.

Это большинство из советов. Удачи в кодировании.

источник:
Changing Times For Web Developers – 6 Tips You Should Read To Survive [49]

Автор: balkonskiy

Источник [50]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/29396

Ссылки в тексте:

[1] узнать о лучших сторонах Javascript: http://www.youtube.com/watch?v=hQVTIJBZook

[2] решительность в продвинутом Javascript: http://www.youtube.com/watch?v=DwYPG6vreJg&feature=related

[3] JQuery : http://jquery.com/

[4] Require.js: http://requirejs.org/

[5] Underscore.js: http://documentcloud.github.com/underscore/

[6] modernizr: http://modernizr.com/

[7] history.js: https://github.com/balupton/History.js/

[8] Часто используемый JS-библиотеки и jQuery плагины: http://coding.smashingmagazine.com/2012/09/23/useful-javascript-libraries-jquery-plugins-web-developers/

[9] Crockford’s Javascript Resources: http://www.crockford.com/

[10] SASS: http://sass-lang.com/

[11] Less: http://lesscss.org/

[12] CSS3 техники: http://www.webdesignerdepot.com/2011/01/50-awesome-css3-techniques-for-better-designs/

[13] поддержка CSS3 свойств в браузерах: http://fmbip.com/litmus

[14] и использование media запросов: http://www.w3.org/TR/css3-mediaqueries/

[15] Twitter Bootstrap: http://twitter.github.com/bootstrap/

[16] Zurb’s Foundation: http://foundation.zurb.com/

[17] Responsive Web Design от Ethan Marcotte: http://www.alistapart.com/articles/responsive-web-design/

[18] Сравнение фрейворков: http://responsive.vermilion.com/compare.php

[19] масса Javascript MVC фремворков: http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/

[20] Backbone.js: http://documentcloud.github.com/backbone

[21] AngularJS: http://angularjs.org/

[22] Spine.js: http://spinejs.com/

[23] KnockoutJS : http://knockoutjs.com/

[24] Ember.js: http://emberjs.com/

[25] YUI: http://yuilibrary.com/

[26] TodoMVC : http://todomvc.com/

[27] Node.js: http://www.amazedsaint.com/2011/09/creating-10-minute-todo-listing-app-on.html

[28] Web APIs: http://www.amazedsaint.com/2012/05/self-hosting-aspnet-web-api-and.html

[29] WOA is here to stay: http://www.amazedsaint.com/2011/08/woa-is-here-to-stay-and-why-new-wcf.html

[30] Richardson Maturity Model – Article from Martin Fowler: http://martinfowler.com/articles/richardsonMaturityModel.html

[31] REST in Practice: http://www.amazon.com/REST-Practice-Hypermedia-Systems-Architecture/dp/0596805829

[32] Hypermedia and Forms: http://blogs.msdn.com/b/gblock/archive/2011/05/09/hypermedia-and-forms.aspx

[33] Web Sockets: http://www.amazedsaint.com/2011/11/html5-is-in-killer-spree-may-kill-http.html

[34] Шаг за шагом с Nettuts: http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

[35] Статья в Smashing Magazine: http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

[36] Лучшие 25 HTML5 свойств: http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/

[37] www.initializr.com/: http://www.initializr.com/

[38] Обзор HTML5 свойств: http://html5demos.com/

[39] http://html5please.com/: http://html5please.com/

[40] CanIUse: http://caniuse.com/

[41] Google Chrome Packaged Applications: http://developer.chrome.com/apps/about_apps.html

[42] Firefox OS: http://www.mozilla.org/en-US/firefoxos/

[43] Соединяйте и уменьшайте Ваши CSS and Javascript: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

[44] Google Chrome’s speed tracer: https://developers.google.com/web-toolkit/speedtracer/get-started

[45] YSlow: http://developer.yahoo.com/yslow/

[46] Fiddler: http://www.fiddler2.com/fiddler2/

[47] Screenfly: http://quirktools.com/screenfly/

[48] Ripple: https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

[49] Changing Times For Web Developers – 6 Tips You Should Read To Survive: http://www.amazedsaint.com/2012/11/changing-times-for-web-developers-6.html

[50] Источник: http://habrahabr.ru/post/172751/