Или как ожил Руутли
TL; DR; После 2 лет использования Meteor по-прежнему остается моим любимым продуктом. React - это круто.
Примерно в августе 2016 года. Оглядываясь на это сейчас, я понимаю, что это было не так давно, но последние 5 недель были ужасными и полезными одновременно. В этот момент оставаться в офисе до 2 часов ночи в субботу вечером кажется нормальным (и просыпаться в 8, чтобы вернуться сюда на следующий день). Это история о том, как Руутли возникло, чтобы изменить то, как мы смотрим на объявления о вакансиях.
Если вы здесь только ради технических специалистов, можете пропустить.
Приквел
Мы - те, кто стоит за Поднимите свой флаг: платформой для тех, у кого нет университетского диплома или диплома колледжа, ищущих работу в компаниях, которые могут привести к карьерному росту. Это довольно просто: мы сопоставляем позицию начального уровня, которую нанимает компания, со следующими тремя шагами в очереди. Мы говорим о навыках / требованиях на каждом этапе и даем информацию на высоком уровне. Это дает контекст для человека, подающего заявку, зная, что должность начального уровня ведет к более устойчивой карьере.
Мы начали эксперимент с одним из наших партнеров, Air Canada, который встроил один из этих путей в их ATS (программное обеспечение для отслеживания кандидатов). Мы отправили одну строку кода менеджеру по привлечению талантов, который затем отправил ее для включения в само объявление о вакансии.
И когда я говорю, что мы начали эксперимент, я имею в виду, что Райан придумал дизайн утром, а ближе к вечеру у нас было что отправить Air Canada для внедрения.
Результаты были впечатляющими. Мы запустили их в течение нескольких месяцев в дюжине объявлений о вакансиях и достигли следующего:
- 65000+ сеансов
- 510 000+ взаимодействий
- 6 500+ кликов Apply
- 150+ рассылок по электронной почте
Тем не менее, число, которое запомнилось нам, было средним временем пребывания на странице. В среднем соискатель тратит 49 секунд на объявление о вакансии, прежде чем решить, подходит он ему или нет. Количество сообщений о вакансиях, в которых был виджет, было 01:34, что почти вдвое больше среднего. Это означало, что люди взаимодействовали с ним, и это имело смысл.
Было разумно предложить это в качестве решения любому менеджеру по привлечению талантов или специалисту по брендингу работодателя, который устал от проблем со стороны кандидата. Удивительные страницы карьеры теряются при переводе, когда они перенаправляются в ATS с объявлениями о вакансиях, которые в лучшем случае имеют крошечный логотип в верхнем левом углу страницы.
Сейчас
Строить Руутлы имело смысл.
Это интерактивный виджет опыта кандидата, который можно разместить в любом месте, которое позволяет технология. Страница карьеры, объявление о вакансии, стена в вашей спальне (вам нужно сначала ее распечатать). Мы также добавляем аналитику, к которой специалисты по привлечению талантов и брендингу работодателей не всегда имеют доступ.
Вы также можете увидеть, как виджет выглядит в реальных условиях, на нашей демонстрационной странице. (Если ваши друзья называют вас Приобретение талантов Тэмми или Брендинг работодателя Брэндон, и вы хотите узнать больше о том, как Ruutly может помочь вам увеличить количество объявлений о вакансиях, давай поговорим)
Техника
Когда дело доходит до создания нового продукта с использованием JavaScript, начало - самая запутанная и утомительная часть процесса. Хосе назвал это этой статьей. Саша недавно опубликовал опрос о состоянии JS в 2016 году. Итак, если вы ищете новый фреймворк, который хотите использовать, удачи.
Я всегда смотрел на экосистему задом наперед с тех пор, как изучил Meteor как свой первый полноценный набор инструментов для разработки. И 2 года спустя я поддерживаю это.
Некоторым людям не совсем ясно, в каком направлении движется Meteor, но на данный момент 1.4 делает то, что должно делать за меня. Было немного сложно научиться использовать npm, ES2016 + и другие новые блестящие функции Meteor, поскольку до того, как все пакеты были доступны вам в любое время.
Соединить его с React было несложно, так как я начал изучать React, когда переключил Raise Your Flag с Blaze на React до версии 1.3 Meteor.
В наши дни я понимаю код еще больше и стараюсь писать лучший код на каждой итерации, которую прохожу. Хотя, когда у вас есть график выпуска нового продукта, вы начинаете красиво и медленно и пишете код, который имеет смысл, но к концу, за 3 дня до того, как мы захотим подготовить продукт, чтобы люди могли с ним поиграть, вы забываете, как выглядит хороший код, отправляете его и молчите.
Хостинг на Galaxy также был моим выбором по умолчанию, поскольку платформа превратилась в надежное место для размещения ваших приложений Meteor. Их служба поддержки очень отзывчива, и мне нравится, что она находится в экосистеме, с которой мне комфортно.
Использование Аруноды и React-Komposer его команды упростило обработку того, какие данные куда идут.
import { composeWithTracker } from ‘react-komposer’;
import { Ruuts } from ‘../../api/ruuts/ruuts.js’;
import { RuutsList } from ‘../components/ruuts-list.js’;
import { Loading } from ‘../components/loading.js’;
import { Meteor } from ‘meteor/meteor’;
const composer = (params, onData) => {
const subscription = Meteor.subscribe(‘ruuts’);
if (subscription.ready()) {
const ruuts = Ruuts.find({ ownerId: Meteor.userId() }, { sort: { title: 1 } }).fetch();
onData(null, { ruuts });
}
};
export default composeWithTracker(composer, Loading)(RuutsList);
React и React Bootstrap отлично работают с Meteor, поэтому отображать эти данные было просто.
import React from ‘react’;
import { ListGroup, Alert } from ‘react-bootstrap’;
import { Ruut } from ‘./ruut.js’;
export const RuutsList = ({ ruuts }) => (
ruuts.length > 0 ? <ListGroup className=”ruuts-list”>
{ruuts.map((ruut) => (
<Ruut key={ ruut._id } ruut={ ruut } />
))}
</ListGroup> :
<Alert bsStyle=”warning”>No ruuts yet.</Alert>
);
RuutsList.propTypes = {
ruuts: React.PropTypes.array,
};
Платежи производятся через Stripe, и их было легко настроить через Meteor с использованием пакета mrgalaxy: stripe. Вот все пакеты Meteor, которые я использовал:
[email protected] # Packages every Meteor app needs to have [email protected] # Packages for a great mobile UX [email protected] # The database Meteor supports right now [email protected] # Reactive variable for tracker [email protected] [email protected] # Meteor’s client-side reactive programming library json http webapp email [email protected] # CSS minifier run for production mode [email protected] # JS minifier run for production mode [email protected] # ECMAScript 5 compatibility for older browsers. [email protected] # Enable ECMAScript2015+ syntax in app code [email protected] [email protected] [email protected] [email protected] browser-policy fourseven:scss aldeed:collection2 alanning:roles themeteorchef:bert [email protected] xolvio:cleaner practicalmeteor:mocha xolvio:backdoor mdg:validated-method dburles:[email protected] [email protected] msavin:mongol meteorhacks:kadira mrgalaxy:stripe momentjs:moment random meteorhacks:picker wylio:mandrill
И пакеты npm:
“dependencies”: {
“analytics-node”: “².1.0”,
“body-parser”: “¹.15.2”,
“bootstrap”: “³.3.7”,
“cloudinary”: “¹.4.1”,
“fibers”: “¹.0.14”,
“googleapis”: “¹³.0.0”,
“jquery”: “².2.4”,
“jquery-validation”: “¹.15.1”,
“meteor-node-stubs”: “⁰.2.3”,
“react”: “¹⁵.3.0”,
“react-addons-pure-render-mixin”: “¹⁵.2.1”,
“react-bootstrap”: “⁰.30.2”,
“react-bootstrap-geosuggest”: “¹.25.5”,
“react-color”: “².3.2”,
“react-dom”: “¹⁵.3.0”,
“react-dropzone”: “³.6.0”,
“react-komposer”: “¹.13.1”,
“react-router”: “².6.1”,
“react-router-bootstrap”: “⁰.23.1”,
“reactcss”: “¹.0.8”,
“stripe”: “⁴.10.0”
}
Интерком - это то, что мы используем, чтобы общаться с нашими пользователями, они классные!
Если у вас есть вопросы по технологиям, оставьте их в комментариях или напишите мне в Твиттере.
Подход
Когда мы начали проект, я старался подготовиться к любому случаю, который мог потенциально замедлить или отложить проект. Я не хотел, чтобы это произошло.
Изучив React и освоившись с ним, я пытаюсь ДУМАТЬ на React. Мы придумали минимальный функционал, а затем разбили его на отдельные компоненты. Каждая страница, каждое представление, каждый элемент были в моей голове отдельной сущностью.
Я ни разу не задумывался о том, как он будет выглядеть, пока у меня не появилась соответствующая функциональность.
Первым делом была пользовательская экосистема. Meteor предоставляет хорошую систему учетных записей, и я выбрал именно ее. После настройки регистрации, входа в систему, сброса пароля я посмотрел на создание объектов.
Три представления были «создание», «редактирование», «просмотр». После того, как у меня была такая настройка, я начал с простой формы для добавления и обновления объекта с одним полем, и как только все было готово, я начал добавлять разные переменные.
И, наконец, я создал все разные страницы, на которых будут размещаться эти компоненты. Контейнер для отображения списка объектов, контейнер для отображения одного объекта, базовый профиль пользователя и т. Д.
Итак, когда начали появляться дизайны, я установил структуру, так что оставалось просто привести их в движение.
Как только все было более или менее настроено, я занялся безопасностью и аналитикой. Мы ДОЛЖНЫ убедиться, что все объекты надежно хранятся и доступны только пользователям, создающим эти объекты.
Мы не хотели использовать «бета» подход, когда вы сначала тестируете его на небольшой группе пользователей, а затем «запускаете».
Я предоставил его команде для тестирования. Мы ломали его кучу раз, я кучу раз исправлял, потом мы ломали его снова. Мы не переставали ломать его, пока не отшлифовали все потоки и не исправили все ошибки, не позволяющие пользователю использовать его должным образом. Мы уверены, что продукт работает так, как должен, и мы здесь, чтобы поддержать всех, кто переживает и пробует его.
В общем, это были долгие 5 недель, но продукт уже есть. Я хотел бы особо поблагодарить ребят из YouXLabs, Джейсон и Тайлер, разработавшие потрясающие дизайны для виджета и панели инструментов.
Выходи.
