Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

240,78
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Новые практические курсы по JavaScript и ES6

Время на прочтение2 мин
Охват и читатели29K


Привет, Хабр!


Последние несколько месяцев мы в Хекслете работали над новыми курсами и обновлениями платформы. Сейчас на сайте доступно четыре "профессии", так мы называем последовательные программы обучения по разным направлениям, от новичка до джуниора. Одна из профессий окончена, а в остальных продолжают выходить новые курсы. Сегодня хочу рассказать про самое важное для нас сегодня направление — JavaScript, в частности профессию "Фронтэнд JS-программист".


Мы пошли не стандартным путем "hello world, сделаем форму, добавим анимацию, изучим ООП", а взяли за основу подход к изучению программирования в целом, а не конкретно языка JavaScript. Язык же используется как инструмент решения задач и применения изученных концепций и идей. При это мы изучаем свежий стандарт ES6 и с самого начала знакомим учащихся с правильным окружениям и техниками: модули, пакетный менеджер, отладка, модульное тестирование.


Вот как выглядит программа обучения:


  1. Жизнь программиста. Про профессию, виды компаний и виды разработки.
  2. Основы программирования. Фундамент: кодинг, ошибки, отладка, функции, побочные эффекты, типы данных. И, конечно, базовые штуки вроде чисел, строк, условий и т.д.
  3. JS: подготовка к работе. Установка и настройка окружения — node, npm, atom.
  4. JS: Составные данные. Как из простых типов данных составлять более сложные. Абстракция от чисел до объектов.
  5. Bash: Основы командной строки.
  6. JS: Последовательности. Пишем свой генератор HTML и изучаем filter, map, reduce.
  7. JS: Программирование, управляемое данными. Типы, сообщения, ООП и TDD.
Читать дальше →

Webpack + React. Как уменьшить бандл в 15 раз

Время на прочтение3 мин
Охват и читатели57K
image

Ясной инструкции по сборке webpack для продакшена я не нашел. Поэтому решил написать эту статью. Надеюсь, пригодится.
Существует множество сборщиков скриптов. Я выбрал для себя Webpack по таким критериям:

  • Гибкость настройки
  • Большое количество плагинов и лоадеров
  • Lazy loading
  • Использование es6 и es7 синтаксиса с помощью babel-loader

Читать дальше →

Асинхронный код в синхронный встроенными средствами

Время на прочтение2 мин
Охват и читатели9.4K
Итак, не так давно мне пришлось столкнуться с довольно популярной задачей преобразования асинхронного кода в синхронный в рамках цикла. В моем случае это была работа с AmazonAPI методами productSearch. Все бы ничего, да вот только данный API очень не любит когда к нему обращаются слишком часто, а мне было необходимо в цикле опрашивать состояние продуктов.

В данной статье я на практическом примере расскажу о реализации способа, которым я воспользовался для решения моей задачи. Приступим.
Читать дальше →

DiffHTML.js — утилита для патчинга DOM

Время на прочтение2 мин
Охват и читатели11K


Что такое DiffHTML.js?


DiffHTML — эта утилита для патчинга (частичного изменения) DOM-дерева. Она умеет находить разницу между существующим DOM-деревом и HTML-строкой, между двумя деревьями. В результате будут произведены только те изменения, которые реально имеют место быть. Те элементы которых не было — вставятся, атрибуты которые были реально изменены — изменятся, и только они. Остальные элементы останутся без изменений.
Читать дальше →

Выбираем состав изоморфных React-приложений на следующие 12 месяцев

Время на прочтение2 мин
Охват и читатели22K
Друзья, уже шесть часов вечера, последний понедельник августа, а это значит — последняя неделя лета. Давайте подведём итог и немного пофантазируем?

Сейчас формируем некий Isomorphic React App бойлерплейт на следующие 12 месяцев, с которым можно быстро стартовать новые проекты. Пока видим такой набор:

1. React 15.
2. На сервере — Node.js и Express.
3. CSS modules и isomorphic-style-loader для автоматической генерации Critical CSS при Server-side Rendering. Или всё-таки JSS?
Читать дальше →

Horizon — realtime JavaScript бэкэнд

Время на прочтение4 мин
Охват и читатели18K


Что такое Horizon?


Horizon — это продукт содержащий в себе NoSQL базу данных RethinkDB, консольную утилиту horizon (hz), авторизацию и ACL, клиентскую JS библиотеку horizon.js для работы с БД на клиенте.

Другими словами: Horizon — это тонкий бэкэнд: БД и правила доступа пользователей к базе на уровне запросов.
Читать дальше →

Векторные вычисления в JS, есть ли смысл, когда и как можно использовать SIMD в браузере

Время на прочтение14 мин
Охват и читатели25K

Все больше и больше область применения языка программирования javascript отходит от движения кнопочками в браузере да перекраски фона в сторону сложных и объемных веб-приложений. Уже во всю по миру шагает технология WebGL, позволяющая отображать трехмерные сцены в браузере прямо на языке js, а вместе с ней и усложняются задачи.


Производительность пользовательских машин продолжает расти, а вместе с ней и язык обзаводится новыми выразительными средствами, позволяющими ускорять вычисления. И пока WebAssembly где-то там в далеком и светлом будущем, asm.js застрял в болоте и свернул с пути, в ближайшее время изначально как часть es2015, ныне как отдельный стандарт выходит поддержка векторных операций в JS.


Все, кому интересно, что такое SIMD и векторные исчисления, как ими пользоваться в js, а так же что дает их использование — прошу под кат.


Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №225 (22 — 28 августа 2016)

Время на прочтение6 мин
Охват и читатели20K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда

Читать дальше →

Как я изобретал велосипед, или мой первый MEAN-проект

Время на прочтение12 мин
Охват и читатели26K

Сегодня, в период стремительного развития веб-технологий, опытному фронтэнд-разработчику нужно всегда оставаться в тренде, каждый день углубляя свои познания. А что делать, если Вы только начинаете свой путь в мире веб? Вы уже переболели вёрсткой и на этом не хотите останавливаться. Вас тянет в загадочный мир JavaScript! Если это про Вас, надеюсь данная статья придётся к стати.

Читать дальше →

Over 9000: неочевидные сложности работы со счетчиками социальных кнопок (+ задачка)

Время на прочтение7 мин
Охват и читатели7.4K


Одна из наиболее востребованных функций социальных кнопок «поделиться» — это счетчик совершенных действий. Малое число лайков и шеров может говорить* о «некачественности» материала; большие числа, наоборот, служат своего рода социальным доказательством и заставляют других делиться контентом.

В ситуации с большими числами становятся актуальны отдельные счетчики для каждой иконки-кнопки соцсети. Однако, даже простой вывод такого счетчика не всегда просто организовать — с технической и визуальной точек зрения. Проще говоря:

  • счетчик может отвалиться в самый неподходящий момент;
  • некоторые социальные сервисы не предоставляют данных о репостах в принципе;
  • а другие не всегда в состоянии обеспечить корректную передачу этой информации.

Читать дальше →

Статическая и динамическая типизация

Время на прочтение13 мин
Охват и читатели190K

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



Тип — это коллекция возможных значений. Целое число может обладать значениями 0, 1, 2, 3 и так далее. Булево может быть истиной или ложью. Можно придумать свой тип, например, тип "ДайПять", в котором возможны значения "дай" и "5", и больше ничего. Это не строка и не число, это новый, отдельный тип.


Статически типизированные языки ограничивают типы переменных: язык программирования может знать, например, что x — это Integer. В этом случае программисту запрещается делать x = true, это будет некорректный код. Компилятор откажется компилировать его, так что мы не сможем даже запустить такой код. Другой статически типизированный язык может обладать другими выразительными возможностями, и никакая из популярных систем типов не способна выразить наш тип ДайПять (но многие могут выразить другие, более изощренные идеи).


Динамически типизированные языки помечают значения типами: язык знает, что 1 это integer, 2 это integer, но он не может знать, что переменная x всегда содержит integer.


Среда выполнения языка проверяет эти метки в разные моменты времени. Если мы попробуем сложить два значения, то она может проверить, являются ли они числами, строками или массивами. Потом она сложит эти значения, склеит их или выдаст ошибку, в зависимости от типа.

Читать дальше →

JavaScript Performance, базы данных и поиски «серебряной пули»: видеозаписи ТОП-5 докладов HolyJS 2016

Время на прочтение4 мин
Охват и читатели15K

Меньше трех месяцев прошло с HolyJS 2016 Piter, шутка ли, даже лето еще не кончилось, а доклады с конференции уже лежат в открытом доступе. Под катом вы найдете 5 лучших докладов, куда вошли как хардкорные вещи о JS-компиляторах, так и «антихипстерский» soft talk о трудностях выбора инструмента JS-разработчиком.




Кроме того, появились трое новых докладчиков в программе HolyJS 2016 Moscow.

Читать дальше →

Ember: Декларативная шаблонизация c компонируемыми хелперами

Время на прочтение5 мин
Охват и читатели3.5K

Ранее, я упоминала, что помощники (Helper) Ember'а были введены в версии 1.13. На мой взгляд, помощники одни из самых полезных, но не часто обсуждаемых, функций Ember.

Читать дальше →

Ближайшие события

Стоит ли Typescript усилий?

Время на прочтение4 мин
Охват и читатели99K
image

Typescript — это скриптовый язык, компилируемый в JavaScript. Разработка Microsoft, которая, на сегодняшний день, успела завоевать и фанатов и недоброжелателей. Главный вопрос для начинающих, и не только: «Зачем он мне нужен?».

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

Использование С++ в AWS Lambda

Время на прочтение14 мин
Охват и читатели5.9K
В этой статье я планирую описать процесс создания и деплоя в AWS лямбда-функции, которая будет вызывать нативный код из С++ аддона. Как вы сможете увидеть, этот процесс не сильно отличается от создания обычной AWS Lambda функции на Node.js — вам лишь нужно настроить своё окружение в соответствии с требованиями AWS.

Что такое AWS Lambda?



Цитируя документацию:

AWS Lambda это вычислительный сервис, в который вы можете загружить свой код, который будет запущен на инфраструктуре AWS по вашему поручению. После загрузки кода и создания того, что мы называем лямбда-функцией, сервис AWS Lambda берёт на себя ответственность за контроль и управление вычислительными мощностями, необходимыми для выполнения данного кода. Вы можете использовать AWS Lambda следующими способами:

  • Как событийно-ориентированный вычислительный сервис, когда AWS Lambda запускает ваш код при возникновении некоторых событий, таких как изменение данных в Amazon S3 или таблице Amazon DynamoDB.
  • Как вычислительный сервис, который будет запускать ваш код в ответ на HTTP-запрос к Amazon API Gateway или запросам от AWS SDK.


AWS Lambda — очень крутая платформа, но поддерживает всего несколько языков: Java, Node.js и Python. Что же делать, если мы хотим выполнить некоторый код на С++? Ну, вы определённо можете слинковать код на С++ с Java-кодом, да и Python умеет это делать. Но мы посмотрим, как это сделать на Node.js. В мире Node.js интеграция с кодом на С++ традиционно происходит через аддоны. Аддон на С++ к Node.js представляет собой скомпилированный (нативный) модуль Node.js, который может быть вызван из JavaScript или любого другого Node.js-модуля.
Читать дальше →

Книга «Веб-разработка с применением Node и Express. Полноценное использование стека JavaScript»

Время на прочтение5 мин
Охват и читатели25K
image JavaScript — самый популярный язык написания клиентских сценариев. Это основополагающая технология для создания всевозможных анимаций и переходов. Без JavaScript практически невозможно обойтись, если требуется добиться современной функциональности на стороне клиента. Единственная проблема с JavaScript — он не прощает неуклюжего программирования. Экосистема Node помогает значительно повысить качество приложений — предоставляет фреймворки, библиотеки и утилиты, ускоряющие разработку и поощряющие написание хорошего кода.

Эта книга предназначена для программистов, желающих создавать веб-приложения (обычные сайты, воплощающие REST-интерфейсы программирования приложений или что-то среднее между ними) с использованием JavaScript, Node и Express. Для чтения книги вам не потребуется опыт работы с Node, однако необходим хотя бы небольшой опыт работы с JavaScript.
Читать дальше →

Node.js и JavaScript вместо ветхого веба

Время на прочтение17 мин
Охват и читатели29K

Вступление


Эта статья про экспериментальный технологический стек общего назначения. Она не просто дублирует мой доклад на конференции ОдессаJS 2016, но содержит все то, что в доклад не поместилось из-за недостатка времени и исключительного масштаба темы. Я даже перезаписал доклад голосом по тексту статьи и это можно послушать, а не читать. С этой темой я уже выступил в Уханьском Университете (Китай), а в Киевском Политехническом Институте провел целую серию семинаров в 2015-2016 годах. Основная идея состоит в том, что проблемы фрагментации технологий могут быть решены, если спроектировать весь технологический стек, сконцентрировавшись на структурах данных, синтаксисе и протоколе взаимодействия компонентов. Большинство вопросов несовместимости, отпадет само собой. Пусть даже этот подход будет альтернативным и экспериментальным, но его задача будет выполнена, если он наметит путь и продемонстрирует принципиальную возможность создания простого и элегантного решения общего назначения. Эта идея является естественным продолжением подхода Node.js, когда мы сокращаем количество языков и технологий в системе, разрабатывая и клиент и сервер на JavaScript. Несмотря на экспериментальность, протокол JSTP уже используется в коммерческих продуктах, например, для интерактивного телевидения компанией SinceTV, где позволяет подключить одновременно десятки миллионов пользователей. Это решение получило приз за инновации в области телевидения на международном конкурсе Golden Panda Awards 2015 в Ченду (Китай). Есть внедрения в сфере управления серверными кластерами, готовятся решения для медицины, интерактивных игр, электронной торговли и услуг.



Слайды / Аудио версия


Читать дальше →

Создание игры «Слова из Слова»

Время на прочтение6 мин
Охват и читатели37K
Добрый день! Хочу представить Вашему вниманию проект-игру «Слова из Слова». Относительно недавно я стал изучать web-программирование и, так как лучший учитель — это практика, решил написать свой вариант довольно-таки известной игры «Слова из Слова». Основная цель — использование чистого Javascript без подключения дополнительных библиотек.

image
Вид игрового поля
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №224 (15 — 21 августа 2016)

Время на прочтение6 мин
Охват и читатели21K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда

Читать дальше →

JavaScript: где мы сейчас и куда двигаться

Время на прочтение19 мин
Охват и читатели48K

Привет, хабраюзер. Поскольку, судя по всему, мы уже живем в будущем, то недавно я плотно засел за изучение новых фич ES6, ES7 и новых идей, предлагаемых React и Redux. И написал для своих коллег статью, в которой изложил сублимацию этих своих изысканий. Статья неожиданно получилась довольно объемной, и я решил опубликовать её. Заранее извиняюсь за некоторую непоследовательность изложения и отсылки к проприетарному коду из наших проектов — но думаю, что это всё же может помочь некоторым из нас лучше понять то, куда движется мир JavaScript, и почему не стоит игнорировать происходящее в нём.


Я расскажу про свои мысли о компонентых моделях, классах, декораторах, миксинах, реактивности, чистой функциональности, иммутабельных структурах данных и ключевой идее React. Сразу скажу — я не являюсь пользователем React, и все изложенное это результат чтения его документации и технических статей, объясняющих его архитектуру. То есть, некоторое идеализированное преставление, которое безусловно лишь упрощенная модель того, как оно всё на самом деле обстоит.


Читать дальше →