10 вещей, которые я узнал во время интернирования в YUI

14 февраля 2017

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

Немного фона

Команда YUI несет основную ответственность за разработку и обслуживание библиотеки YUI. Библиотека представляет собой набор компонентов пользовательского интерфейса, инструментов управления классами и утилит, написанных на JavaScript и CSS, которые упрощают разработчикам создавать веб-приложения. В отличие от других библиотек, YUI - это не только манипулирование DOM; он имеет богатый набор инструментов управления классами и надежную систему событий, которая упрощает разработку в JavaScript.

Кроме того, команда YUI также отвечает за YUI Theater, очень популярный ресурс для веб-разработчиков, а также множество меньших инструментов, таких как YUI Builder, YUI Compressor, YUI Test и многое другое.

Моя роль в команде заключалась в том, чтобы в первую очередь помочь развить компоненты для библиотеки, хотя я немного помог и в театре YUI.

1. Понимание библиотеки

Когда я вошел в Yahoo в первый же день, у меня был нулевой реальный опыт с YUI. Я был знаком с JavaScript, jQuery, HTML CSS и PHP, но в основном это касалось веб-программирования. Я уверен, что многие из вас были или были в той же лодке, что и я.

Моей первой задачей было изучение синтаксиса и архитектуры позади YUI3. К счастью, у меня было хорошее понимание сырого JavaScript, и это помогло неизмеримо. Многие инженеры-фронтеры прекрасно знают некоторые библиотеки, но многие не знают, как они работают под капотом. Чтобы создавать плагины или модули поверх библиотеки (например, YUI3 или jQuery), полезно иметь фундаментальное представление о том, как работает эта библиотека, и в этом случае, как работает JavaScript в качестве языка.

То, что я узнал: наличие фундаментального понимания необработанного JavaScript (без библиотек) заставляет вас лучше понимать язык и делает вас лучшим разработчиком в долгосрочной перспективе.

Думаю об этом. Каждая библиотека JavaScript отличается и имеет свои собственные особенности. Единственная общая черта заключается в том, что они основаны на JavaScript. Разве не имеет смысла сначала понимать идиосинкразии JavaScript? Потратьте немного времени, чтобы построить что-то маленькое, не используя библиотеку. Вы будете рады, что вы это сделали.

Js Основы Ссылки

Повторное введение в JavaScript с помощью кодовых соглашений Mozilla в Javascript от Дугласа Крокфорда 11 Ошибки JavaScript, которые вы делаете Андреем Берджессом Курс по основам JavaScript

2. Использование Git в команде

Команда YUI полагается на Git как на их первую систему контроля версий, а проект размещен на Github. До моей стажировки в YUI я использовал Git для своих небольших проектов, и это обычно состояло из следующих шагов:

    git pull origin master git add "" git commit -m "" git push origin master

I Я уверен, что многие из вас сделали то, что я только что описал. Как правило, по мере того как время проекта увеличивается, коммиты усложняются! Однако в большой команде с десятком разработчиков этот метод очень быстро разрушается. Во-первых, мастер в YUI3 (и многих других крупных проектах) считается стабильным кодом, который был проверен подразделением, поэтому он обычно не переходит туда до более позднего этапа. Как правило, каждый разработчик работает на отдельной ветке и сливается с мастером, как только они уверены в своем коде.

То, что я узнал: вам не обязательно быть гуру, но понимание основ Git (разветвление, слияние, возврат и разрешение конфликтов слияния) может значительно помочь сохранить ваши репозитории в чистоте и организованности.

С Git многое можно сделать, и я обнаружил, что вместо того, чтобы изучать их раньше времени, более полезно исследовать, когда вам нужно что-то делать в частности. Что еще более важно, мой опыт научил меня быть осторожным при экспериментировании с Git. Лучше спросить кого-нибудь, когда вы пытаетесь новую команду или попробовать ее на ложном репо вместо того, чтобы испортить историю фиксации live-репо.:)

Основы Git Ссылки

Основы ветвления и объединения 25 советов для промежуточных пользователей Git

3. Модульная архитектура для веб-приложений

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

<DOCTYPE html>
<html>
    <head>
    <script>
        //My entire application's JS right here in one single spot. Uh oh.
    </script>
    ...

Это вводит плотную связь между объектами и не является хорошей практикой, когда дело касается объектно-ориентированного программирования. Хуже того, у вас могут быть глобальные переменные, которые делают ваше приложение неожиданным образом. В прошлом мы все были виновны в этом. К счастью, библиотеки, такие как YUI, могут помочь вам в этом.

Что я узнал: при написании всего веб-приложения на JavaScript очень важно иметь хорошо организованный код; сохранение спагетти-кодированного проекта вызовет только головные боли и кошмары.

Одним из наиболее важных аспектов YUI3 является его модульный характер. Как разработчик, вы просто вытаскиваете код, который вам нужен. Это уменьшает сцепление, уменьшает размер файлов и улучшает читаемость кода.

Например, вы можете сделать это в файле, называемом counter.js:

YUI.add("counter", function(Y) {

    //Write code specific to my counter object

}, '1.0', {requires: ['node']); //Say what my counter object code needs to run. YUI will pull these in first.

А затем в отдельном JS-файле, таком как app.js:

YUI_config = {
    modules: {
        'counter': { fullpath: 'path/to/counter.js', requires:['node'] }
    }
};

YUI().use('counter', function(Y) { //Pull down my counter module.
    var counter = new Y.Counter({…}); //Create a counter instance
});

Вместо того, чтобы иметь один большой файл под названием app.js, мы разделили его на основе функциональности в counter.js и app.js.

4.odeJS и YUI на сервере

Растущая популярность NodeJS заставила меня начать строить с ним кое-какие вещи. Будучи ведущим инженером, мне нравится использовать JavaScript на сервере. Хотя NodeJS не подходит для всего, его стоит изучить.

JS на сервере не имеет таких же ограничений, как JS на стороне клиента, поскольку DOM отсутствует, но библиотека, такая как YUI, может по-прежнему помогать вам в разработке архитектуры программного обеспечения на сервере - такие, как управление классами и объектами, а также пользовательские Мероприятия.

Что я узнал: YUI 3 - это не только манипуляция с DOM, но также содержит надежный набор инструментов управления объектами класса, не говоря уже о наших мощных пользовательских событиях. Все эти инструменты сразу же полезны при программировании на стороне сервера.

Будучи в команде YUI, я смог изучить модуль Dav Glass 'NodeJS-YUI3, который завершает работу YUI для использования в среде NodeJS. Помните, что, помимо веб-сайтов, NodeJS является полезным инструментом для создания утилит командной строки. Хорошая архитектура программного обеспечения всегда является большим плюсом!

Это сводится к управлению кодом

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

5. Взлом с использованием YUI

Что я узнал: продолжайте сосредоточиться и продолжайте взламывать.

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

Подобно jQuery, YUI3 имеет отличный набор виджетов, утилит и CSS-фреймворков. В один из дней Yahoo Hack у меня был шанс сесть и попробовать некоторые из них. Поскольку я поклонник крикета, я сделал мобильное веб-приложение под названием Crictainment. Позвольте мне изложить некоторые части YUI, которые я нашел особенно полезными для взлома.

Y.ScrollView

Взлом веб-приложения с использованием YUI довольно прост. Например, если вы хотите, чтобы скроллинг просматривался пальцами:

YUI().use("scrollview", function(Y) {

    var scrollview = new Y.ScrollView({
        srcNode:"#scrollable",
        height:"20em"
    });

});

И в HTML:

<div id="scrollable" class="yui3-scrollview-loading">
<ul>
    <li>AC/DC</li>
    <li>Aerosmith</li>
    <li>Bob Dylan</li>
    <li>Bob Seger</li>
    ...
</ul>
</div>

Модуль scrollview определяет, должен ли он быть горизонтальным или вертикальным в зависимости от ширины и высоты его контейнера. Более подробную информацию о прокрутке YUI3 можно найти здесь.

Y.Anim

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

var myAnim = new Y.Anim({
    node: '#demo',
    to: {
        width: 0,
        height: 0
    }
});

myAnim.on('end', function() {
    myAnim.get('node').addClass('yui-hidden');
});

Y.YQL

Другим действительно важным инструментом, который отлично подходит для взлома, является YQL - Yahoo Query Language. Я уверен, что большинство из вас это использовало, но для тех, кто этого не сделал, подумайте об этом как о способе доступа ко всему множеству различных API-интерфейсов, используя стандартный синтаксис. YUI и YQL работают хорошо вместе через модуль Y.YQL. Например, здесь мы получаем недавнюю активность от Vimeo:

YUI().use('yql', function(Y) {

    Y.YQL('select * from vimeo.activity.everyone where username="basictheory"', function(r) {
        //r now contains the result of the YQL Query
    });

});

Попробуйте этот запрос здесь. Я регулярно использую YQL для последовательного доступа к различным API-интерфейсам.

Независимо от того, используете ли вы YUI, jQuery или любую другую библиотеку, создание чего-то с ней - отличный способ познакомиться с вашим инструментом разработки. При взломе не беспокойтесь о технических деталях - просто установите лимит времени и просто создайте его!

6. YUI App Framework

Одним из новых дополнений к YUI была платформа приложений. Это похоже на Backbone.js, но с сложной инфраструктурой событий YUI под капотом. Приложение Framework упростило мне создание веб-приложений в стиле MVC.

Как и любой другой инструмент, я создал что-то с App Framework, чтобы понять, как он работает. Еще раз, я не могу подчеркнуть преимущества взлома продуктов. Для платформы приложений я создал TopForty с моим другом.

Модель

Рамка приложений YUI построена на шаблоне проектирования MVC. Начнем с модели. Если вы не знакомы с MVC, взгляните на этот учебник.

Для TopForty нам удалось получить большой массив JSON из самых обсуждаемых песен из Twitter. Каждый объект в массиве выглядел так:

{
    "title": "PayPhone",
    "position": 1,
    "video_id": "5FlQSQuv_mg",
    "song_id": 627,
    "artist": "Maroon 5",
    "duration": 232,
    "images": […]
}

Мы завернули это в подкласс Y.Model под названием Y.SongModel. Вот определение класса:

Y.SongModel = Y.Base.create('songModel', Y.Model, [], {

    initializer: function (config) {
        ...
    }
}, {
    ATTRS: {
        title: {},
        artist: {},
        images: {
            value: []
        },
        nowPlaying: {
           ...
        }
        ...
    }
});

Это позволило нам слушать события, когда один из ATTRS в модели изменился и предпримет соответствующие действия. Например, если текущая песня была изменена:

//When the model's isPlaying attribute changes, call the handleIsPlayingChange function.
this.model.after('isPlayingChange', this.handleIsPlayingChange, this);

Вид

Каждая модель была визуально представлена представлением, которое по сути является просто HTML. Для TopForty у нас был SongView, который выглядел примерно так:

<div class="song yui3-u" id="songModel_2">
            <img class="song-img" src="...">
            <div class="song-desc">
                <div class="song-number">2</div>
                <div class="song-movement">
                    <img class="movement-icon" src="...">
                </div>
                <div class="details">
                    <h4 class="song-name">Turn on the lights</h4>
                    <p class="artist-name">Future</p>
                </div>
            </div>
</div>

Мы завернули это в подкласс Y.View под названием Y.SongView. Каждому представлению требуется метод render (), который вызывается при отображении представления на странице, и метод initializer (), где подписываются события. Если вы хотите, вы можете установить связь между вашим представлением и экземпляром Model или Model List, присоединив обработчики событий к ним в пользовательском методе initializer (), как показано ниже:

Y.SongView = Y.Base.create('songView', Y.View, [], {
    initializer: function (config) {
            var model = this.get("model");
            model.after('change', this.render, this);
            model.after('destroy', this.destroy, this);
    },
    render: function() {
        ...
    },

    destroy: function() {
        ...
    },

    showSongOverlay: function() {
        ...
    }
},{ 
    ATTRS: {
        container: Y.one("#songContainer")
    }
});

Делая это, мы могли использовать специальные методы, такие как displayNowPlayingIndicator () и showSongOverlay () для экземпляра Y.SongView, а не как отдельные функции.

Маршрутизатор

Маршрутизатор, официально известный как Контроллер, - это то, что заставляет все подключаться и работать. Помните, что в классическом MVC все пользовательские действия традиционно проходят через контроллер. В веб-приложениях маршрутизатор использует историю HTML5 для изменения URL-адресов и управления состоянием приложения.

Например, в TopForty щелчок по песне изменяет URL на ID песни. Изменение URL-адреса выбрано маршрутизатором, который загружает видео на YouTube для данной песни:

Y.AppRouter = Y.Base.create('appRouter', Y.Router, [], {
  // Default route handlers inherited by all CustomRouter instances.
  index: function (req) {
    // ... handle the / route, load up the UI, etc.
  },

  loadSongFromUrl: function (req) {
    // ... handle the /song/:songId' route ...
    //Get the youtube video from the model with an id of :songId and play it.
  }
}, {
  ATTRS: {
    // The specific routes that we are interested in listening to:
    routes: {
      value: [
        {path: '/',    callback: 'index'},
        {path: '/song/:songId'', callback: 'loadSongFromUrl'}
      ]
    },
  }
});
Что я узнал: Использование шаблона проектирования MVC может помочь вам создать что-либо из простых неинтерактивных представлений в богатые приложения.

Надеюсь, я смог дать вам представление о том, что возможно с помощью платформы приложений YUI. Для более тщательного пошагового руководства я рекомендую следующие ссылки. Если вы не являетесь поклонником платформы приложений, я рекомендую вам изучить эквивалентные альтернативы jQuery. У Backbone.js, в частности, есть большое количество документов с хорошей документацией.

Руководство пользователя платформы приложений YUI Github Repo проекта платформы приложений YUI Слайды из платформы приложений YUIConf Talk

7. Тестирование и тестирование YUI

Для разработчиков код письма часто является легкой и интересной частью. Жесткая часть - это выяснить, как работает старый код с ошибкой и пытается исправить прошлые ошибки. Чтобы свести к минимуму это, многие организации, включая Yahoo, подчеркивают важность разработки, основанной на тестировании (TDD). С TDD вы сначала пишете тесты, затем добавляете функциональность до тех пор, пока все ваши тесты не пройдут. Хотите добавить новую функцию? Напишите новый тест, затем введите код.

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

Одним из основных способов проведения модульного тестирования является тестирование YUI.

То, что я узнал: следующие основанные на тестах принципы развития делают вас более продуктивными как программист.

YUI Test - это полная тестовая среда для JavaScript и веб-приложений. Вы можете использовать простой синтаксис JavaScript для написания модульных тестов, которые можно запускать в веб-браузерах или в командной строке, а также для функциональных тестов, которые должны выполняться в веб-браузерах.

Вот как вы его настроили:

// Create a new YUI instance and populate it with the required modules.
YUI().use('test', function (Y) {
    // Test is available and ready for use. Add implementation
    // code here.

});

Теперь мы можем начать писать некоторые модульные тесты!

var testCase = new Y.Test.Case({

    name: "TestCase Name",

    //---------------------------------------------
    // Setup and tear down
    //---------------------------------------------

    setUp : function () {
        this.data = { name : "Tilo", age : 23 };
    },

    tearDown : function () {
        delete this.data;
    },

    //---------------------------------------------
    // Tests
    //---------------------------------------------

    testName: function () {
        Y.Assert.areEqual("Tilo", this.data.name, "Name should be 'Tilo'");
    },

    testAge: function () {
        Y.Assert.areEqual(23, this.data.age, "Age should be 23");
    }
});

Тест YUI поддерживает утверждения равенства (areEqual ()), который использует ==, утверждение sameness (areSame ()), которое использует ===, специальные утверждения значения, такие как isFalse (), isNotUndefined (), макет объектов и многое другое.

После написания наших тестов мы можем запустить его, как показано ниже. Результаты теста могут выводиться как XML, JSON, jUnitXML или TAP.

Y.Test.Ruer.add(testCase);
Y.Test.Ruer.run();

Не забудьте проверить, независимо от того, что вы используете.

Если вы не используете YUI Test, все в порядке. Тем не менее, я хочу подчеркнуть важность тестирования вашего кода. Я виноват даже сегодня в написании кода без написания тестов, и, вероятно, это нормально, если это ваш собственный небольшой личный проект. Когда-то мы все время срезали углы. Однако, если вы программируете для клиента или организации, следующие принципы TDD избавят вас (и ваших клиентов) от головной боли.

8. Минимизация и написание вашего JavaScript

Работа с файлами JavaScript без каких-либо действий по минимизации или линке может быть рискованной. Минимизация часто может сжать размер файла более чем на 30%, что ускоряет загрузку страницы для конечного пользователя. Linting - хороший способ гарантировать, что ваш JavaScript следует хорошей практике кодирования, чтобы ошибки были сведены к минимуму.

Во время моего пребывания в Yahoo мы использовали компрессор YUI и YUI Builder для сжатия и сборки нашего кода. Шаг сборки включает конкатенацию и перелистывание через JSLint. Я уверен, что большинство из вас использовали JSLint на определенном этапе, и я уверен, что это помогает улучшить стиль кодирования.

То, что я узнал: спросите себя, позволяет ли определенная практика уменьшить вероятность ошибок, и если да, следуйте за ней.

Теперь я не буду подробно говорить о компрессоре и строителе YUI, потому что это могут быть не инструменты по вашему выбору. Обычно для моих собственных проектов я использую модуль JSLint NPM для проверки кода.

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

Дополнительное чтение

Grunt, инструмент сборки для JavaScript Phing Build Script JSLint NPM-модуль YUI Builder YUI Compressor

9. Кодирование с помощью User in Mind

Команда YUI имеет большое количество дружественных, активных и знающих разработчиков, как и большинство крупных проектов с открытым исходным кодом. Как разработчики, работающие на ПО с открытым исходным кодом, я узнал, что я не могу сидеть под камнем и кодом весь день, даже если захочу. Разработка - это как раз о написании кода, так как он предназначен для того, чтобы убедиться, что код, который вы пишете, на самом деле помогает кому-то решить проблему.

Мне потребовалось некоторое время, чтобы учиться, но это важный урок. При написании программного обеспечения целью является не использование самой крутой технологии или новейшего стека или самого горячего языка. Речь идет о пользователе. При написании OSS пользователи часто являются разработчиками, которые строят поверх вашего продукта. Небольшие вещи, такие как еженедельные обновления, твиты и связь с IRC, могут помочь вам больше, чем часы кодирования.

Что я узнал: речь идет не о технологии или стеке, а о языке, речь идет о пользователе.

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

10. «Когда у вас есть молот, все выглядит как гвоздь».

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

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