Текст / Фу Син
По случаю предстоящего нового финансового года я хотел бы обобщить свои чувства в области переднего плана в прошлом году, чтобы подвести итоги и поразмышлять о росте за прошлый год и с нетерпением ждать направления усилий. в новом финансовом году.
мой предшественник
Раньше я был разработчиком Android-клиента, и моя работа всегда была связана с нативным контентом и видеоконтентом.С фронтендом я почти не контактирую.Поначалу мне казалось, что работа с фронтендом слишком проста и нет технология фронтенда, которая могла бы меня привлечь.Потом позже появилась концепция большого фронтенда, которая натолкнула меня на мысль заняться фронтендом, технология plug-in, которая была в полном разгаре в клиентской части поле постепенно снижалось, и даже более поздние РН,WeexИх постепенно заменили Flutter и небольшие программы.Взрывной рост технологий в большом фронтенде привлек меня не только определенной технологией, но и будущими технологическими трендами. Среди нихВнешний интеллектСлово свет в моих глазах, разумное использование машинного обучения для генерации кода, чтобы делать значимые вещи, которые я в конце концов присоединился к семье!
Слабое переднее основание
Вспоминая путь программирования в начале, просмотр видео в университетской студии по изучению J2EE, держа в руках книгу "Java Programming Ideas" в целом, хоть и очень тяжело, но очень интересно, так как можно разрабатывать на Java обратно- конечно, я также знаю фронтенд, и работа по написанию бэкенда, можно сказать, занимает большую часть всего проекта.В то время фронтенд был просто «пажом» в моем глаза, ничего кроме HTML, JS, CSS, и технического контента было не много.Возьмем несколько днейW3SchoolПросто научитесь владеть им. В школе я сделал много JavaWeb-проектов и изучил некоторые необходимые интерфейсные технологии, такие как JQuery, ExtJs и т. д., поэтому я просто остановился на этом, и я не разбирался в области фронтенда глубоко.
Позже, в работе по разработке клиента, я столкнулся с HyBrid и использовал Webview на уровне Native для рендеринга страниц H5, но это больше связано с пониманием того, как JS взаимодействует с Native, и до сих пор мало контактирует с интерфейсом.
Обобщая мои существующие базовые знания о внешнем интерфейсе с картинкой, это:
Путь к трансформации
Год назад, когда я решил вернуться в фронтенд-сферу, я вдруг обнаружил, что фронтенд-сфера претерпела колоссальные изменения, хотя я обычно обращаю внимание на технологические тренды большого фронтенда, т.к. пока я не занимаюсь разработкой, я не знаю, что текущий интерфейс больше не является тем, чем может управлять «мальчик-паж». Взрывной рост технологии, которую нужно изучать внезапно, у меня вдруг возникает ощущение возвращения в кампус, мне не терпится начать обучение немедленно, но я не могу учиться вслепую, иначе я попаду в Передний конец океана и потерять свой путь. , Поэтому необходимо разработать план исследования с целью.
учебный план
Что касается маршрута обучения переднего плана, в Интернете много информации.Однако такой большой и всеобъемлющий маршрут обучения очень сбивает меня с толку и требует много времени для изучения.После общего понимания я объединил себя в качестве клиента По ситуации я составил соответствующий поэтапный план согласно требованиям и целям Моя цель - в короткие сроки выйти на фронтенд-поле, освоить его ключевые технологии, а затем интегрировать в команду для участия в разработка бизнес-требований (все виноваты продукты).Слишком много запросов - -!):
- Этап 1. Изучите основы «Трех мушкетеров Интернета», повторите основы HTML, CSS, JS и изучите новые (для меня) знания, включая ES6, цепочку прототипов, макет Flex и многое другое.
- Второй этап: изучить гибридный интерфейсный фреймворк, HyBrid, RN, Weex, апплет, Flutter и т.д.
- Третий этап: изучить основные интерфейсные фреймворки и управление сборкой проектов, React, Vue, Angular, Webpack, NPM, Flux, Redux и т. д.
- Четвертый этап: изучите внутренний каркас Али и технологию строительства, зебру, ковчег, деф, ракс и т.д.
- Пятый этап: Технологии обучения в области интеллекта, машинного обучения, НЛП, нейронных сетей, TensorFlow, imgcook и др.
Основы перезагрузки
Поскольку у меня есть соответствующая база веб-разработки, мне не нужно начинать интерфейс с нуля, поэтому мне нужно пройтиW3SchoolОбучение – это обзор существующей основы. Однако этого далеко не достаточно в практической разработке приложений, особенно JS, который больше не будет использовать JQuery для разработки, а есть цепочки прототипов, стрелочные функции, классы, Promise... Что касается более новых точек знаний, то я, коллега, кинул мне PDF («Понимание ES6») и начал его читать. Кроме того, я еще объединилРуководство по началу работы с ES6Одновременное обучение, обучение на практике, и вскоре вы можете приступить к работе. Что касается CSS, самое главное — это Flex layout, а самая читаемая статья — это статья Ruan Yifeng:Учебное пособие по гибкому макетуПрактические технологии освоены одновременно, и знания постоянно консультируются и дополняются в последующем развитии.
Создайте среду
Если вы хотите делать хорошую работу, вы должны сначала отточить свои инструменты.Если вы хотите эффективно разрабатывать, у вас должна быть удобная IDE (для тех, кто разрабатывает с помощью vim, emacs и блокнота, пожалуйста, пропустите - -!). Я думаю о помощи основных артефактов, таких как Android Studio, в разработке для Android и отличной помощи Visual Studio Code во внешнем интерфейсе.Если подключаемые модули установлены правильно, разработка очень удобна.
Обычно используются следующие плагины:
- Prettier — средство форматирования кода, Эсбен Петерсен, полезно только с конфигурацией ниже этого плагина.
- xtemplate — bakso, для открытия файлов .xtpl
- vue — liuji-jim, для открытия файлов js для vue
- IntelliJ IDEA Keybindings — раньше я пришел с Android или бэкенда.Те, кто привык к IDEA, могут использовать этот плагин.Горячие клавиши похожи.
- TabNine — плагин автодополнения, разработанный иностранцами, он довольно прикольный, но мне немного навязчиво им пользоваться
- Автоимпорт - ES6, TS, JSX, TSX, Сергей Коренюк, может только подсказывать импорт
- imgcook — интеллектуальный подключаемый модуль продукта нашей команды, шеф-повар, который может интеллектуально генерировать код из эскизов проекта одним щелчком мыши, в сочетании с мощными инженерными возможностями VSCode высвобождает вашу производительность.
Когда я писал на Java, мне нужно было настраивать файл шаблона, а затем форматировать файл после каждого редактирования или следовать спецификациям при написании, а теперь я пишу JS, нам вообще не нужно заботиться об этом, так как пока мы используем один и тот же файл конфигурации, после редактирования кода он был отформатирован, когда вы нажимаете Command + S. Конфигурация, которую я использую, выглядит следующим образом:
{
"editor.formatOnSave": true,
"typescript.preferences.quoteStyle": "single",
"javascript.preferences.quoteStyle": "single",
"prettier.singleQuote": true
}
Гибридная рама
Если вы только что научились применять фронтенд-технологию для разработки спроса, это всего лишь сторонний ресурс, а не старший фронтенд-инженер, поэтому план второго этапа, который я составил, состоит в том, чтобы изучить структуру разработки гибридного фронтенда в сочетании с моим опытом работы в качестве клиента, у меня есть некоторое понимание HyBrid, относительно легко изучить принципы этих фреймворков.
Команда клиента, в которой я работал в прошлом, производила интернационализированные продукты для двойной печати, и некоторые требования маркетинговой деятельности заключались в разработке страниц H5 с интерфейсом.В соответствии с фактическими потребностями у нас не было таких фреймворков, как Weex, RN и Flutter. самый оригинальный фреймворк HyBrid, разработанный с помощью возможностей JS Bridge и WebView, преимущество в том, что он полностью ориентирован на веб-разработчиков, динамические возможности хорошие, а недостаток - явно низкая производительность.
Weex+Rax
Кроссплатформенная технология второго поколения, несомненно, основана на React Native,WeexПредставлено и т. д. Хотя основные компании имеют схожие фреймворки, фактические принципы схожи, и достаточно освоить принцип одного. Внутри Али, конечно же, мы должны изучить принципы Weex.
В прошлом при разработке страниц H5 на основе инфраструктуры HyBrid фактически разрабатывались страницы, которые запускаются в браузере, но только добавлялись возможности JS Bridge.Возможно, что WebView в клиенте является браузером, а реализация Стандарт сложен.Очень высокий, количество строк кода двигателя составляет от 5 до 10 миллионов строк, с длинной историей и большой нагрузкой.Огромный масштаб кода приводит к высоким затратам на ввод и модификацию, а также к дефектам конструкции механизм рендеринга, такой как JS Execute, Layout, Paint All in MainThread, не может быть распараллелен и т. д., поэтому не может реализовать расширенные функции компонентов на стороне клиента, такие как Recyclerview, ViewPager и т. д.
Инфраструктура второго поколения выглядит следующим образом:
Технология этого поколения состоит в том, чтобы выбросить много исторического багажа и повторно реализовать JS Engine.Через средний уровень JS Framework логика и представления интерфейса преобразуются в логику и представления на стороне клиента для рендеринга и, наконец, выполняется с помощью внешнего кода. Рендеринг на стороне устройства для улучшения качества рендеринга на собственной стороне.
Преимущество очевидно в том, что производительность намного лучше, а недостаток в том, что он не полностью совместим с веб-стандартами, это только подмножество, и между Android и iOS есть различия.
Структура Weex выглядит следующим образом:
В системе Weex JS выполняется в JS Thread, Layout выполняется независимо в Layout Thread, а рендеринг — в MainThread системы.Три потока независимы друг от друга и выполняются параллельно. В системе WebView выполнение JS, Layout и Paint все находится в MainThread, и они влияют друг на друга, что приведет к зависанию интерфейса при выполнении сложных задач. Тем не менее, макет необходимо выполнять в WeexCore и собственном макете Android Native соответственно, что неэффективно, а стоимость упаковки компонентов становится все выше и выше по мере увеличения сложности, и трудно преодолеть ограничения Native View, чтобы предоставить больше. подробные стандартные возможности W3C.
После освоения принципа операционной среды я вошел в технологию изучения фреймворка фронтенд-разработки и управления построением проекта, хотя DSL на верхнем слое Weex — это Vue иRax, но реальность такова, что мы больше не используем Vue (однако я все еще изучал Vue, но, к сожалению, он не пригодился--!), Rax на самом деле такой же, как React, поэтому они совместимы. Недостаточно знать их, но также понимать принцип упаковки Webpack и упаковки npm.
Внутри Ali главное — изучить и понять платформу построения DEF. Согласно определению, «DEF — это инженерная экосистема разработки переднего плана, инициированная командой переднего плана Taobao. Благодаря вспомогательным спецификациям, инструментам, определениям процессов, управлению правами и журналы данных для повышения эффективности разработки интерфейса, обеспечения согласованности и воспроизводимости процесса разработки команды, а также повышения качества и безопасности кода». Помимо обучения разработке front-end страниц в системе Weex, вам также необходимо научиться разрабатывать страницы крупной промо-площадки, то есть систему построения Tianma, такую как система построения Ark и Zebra.
D2C
Пока четыре этапа в плане в основном выполнены, а остальное - проблема мастерства.Как бы бизнес не развивался, он всего лишь старший фронтенд инженер, и в вертикаль он не прижился поле, то есть Недостаточная глубина, отсутствие собственной хватки.
В нашей команде наша миссия состоит в том, чтобы раскрыть инновационную способность передних инженеров, повысить эффективность для каждого инженера, дизайнера и продукта, а также даже освободить руки, освободить производительность и достичь цели 0 НИОКР. D2C, который относится к дизайну к коду, реализует отличный идеал интеллектуального производственного кода в интерфейс через комбинацию AI и интерфейса.
ImgCook
Imgcook ориентирован на визуальные черновики в виде эскиза, PSD, статических изображений и т. Д. В качестве ввода, и генерирует ремонторуемый интерфейсный код одним щелчком мыши через интеллектуальные технологии, включая код просмотра, привязки поля данных, код компонента и какой-либо бизнес-логику код.
До того, как я присоединился к этой большой семье, наша команда уже вынашивала продукт ImgCook, я не мог участвовать в процессе разработки этого продукта, хотя, к сожалению, я могу наслаждаться исследованиями и разработками, которые принес нам этот продукт. Преимущества эффективности.
заявление
Обычно наш процесс разработки заключается в том, чтобы запросить продукт, а затем создать визуальный проект.Общий визуальный проект предоставляется студентам R&D в виде эскиза, а затем студенты R&D получают визуальный проект и пишут интерфейс в соответствии с содержание внутри, по крупицам.Чтобы настроить стиль CSS, иногда нужно самому вырезать изображение.Лучший дизайнер вырежет изображение для вас и загрузит его на сервер изображений, но в большинстве случаев, это только наши собственные разработчики кто знает какая вырезка изображения на самом деле нужна. , в итоге сделал все сам. После того, как мы закончили разработку, нам понадобились дизайнеры и собственники бизнеса для проведения обходов, а потом еще волна корректировок, на хождение туда-сюда уходило много времени.
С ImgCook вышеперечисленные проблемы легко решаются, используя ImgCook для восстановления визуального кода в высокой степени, можно не беспокоиться о корректировке стиля дизайнером :) Теперь я буду использовать реальный пример разработки, примененный в проекте. рассказать о том, как я использую ImgCook для повышения эффективности своей ежедневной разработки (использую Sketch на Mac для генерации кода Rax одним щелчком мыши).
первый шаг:
Нужно подготовить свою среду, я рекомендую идтиОфициальный сайт ImgCookПрочтите приведенные выше инструкции, установите Sketch на свой Mac, перейдите на официальный сайт ImgCook, чтобы загрузить подключаемый модуль, а затем дважды щелкните imgcook.sketchplugin, чтобы установить его.После успешной установки эффект будет следующим:
Шаг 2:
Получите эскиз от дизайнера, следуйте инструкциям на официальном сайте ImgCookТехнические характеристикиЧтобы настроить его, мы, конечно же, настоятельно рекомендуем дизайнерам следовать спецификациям ImgCook при разработке эскизов. Эти характеристики не повлияют на эффект визуального черновика, но сделают ImgCook более компактным.
Визуальный проект, который я получил, выглядит следующим образом, а модули, которые необходимо разработать, показаны в красной рамке:
Обычно мы используем ImgCook для восстановления модуля как измерения, поэтому нам нужно сгруппировать слои в одном и том же модуле в одну группу, как показано ниже, есть два способа группировки, один из них — удерживать нажатой клавишу Command для выбора нескольких объектов. Позже , щелкните правой кнопкой мыши и выберите "Группировать выбранные объекты". Второй способ заключается в непосредственном использовании сочетания клавиш Command+G.
Затем обычная корректировка заключается в вырезании изображения. Обычно дизайнеры объединяют несколько объектов-элементов в фоновое изображение, и нам нужно только одно вырезанное изображение. В настоящее время его необходимо объединить. Во-первых, используйте описанный выше метод, чтобы создать фоновое изображение После группировки нажмите кнопку слияния плагина ImgCook, чтобы сгенерировать тег #merge# в названии группы, чтобы при экспорте сгенерировалось изображение:
Что делать, если размер рисунков, созданных дизайнером, слишком велик? Решить ее можно добавлением в группу Маски (маски) реального размера и положения Маска, показанная на рисунке выше, является маской. Метод добавления маски очень прост, по сути, это нарисовать прямоугольник и поместить его внизу группы.
Фактический эффект, на примере официального сайта ImgCook, выглядит следующим образом, исходный размер изображения 842 x 465, если нет Маски, сгенерированное изображение не соответствует ожиданиям. Размер маски установлен на 702 x 394, а окончательный сгенерированный размер — ожидаемый 702 x 394.
третий шаг:
После настройки визуального проекта выберите группу модулей для экспорта, а затем нажмите кнопку «Экспорт данных» хлеба плагина ImgCook, чтобы экспортировать данные:
После успешного экспорта появится всплывающее окно, нажмите, чтобы вставить, чтобы настроить веб-редактор, затем нажмите Command + V, чтобы вставить код, вы можете просмотреть эффект, нажмите кнопку «Сохранить» в правом верхнем углу. для сохранения проекта можно просмотреть сгенерированный код.
четвертый шаг:
На самом деле то, что ImgCook экспортирует, это json файл, который можно предварительно просмотреть после вставки, а также можно настроить в вебе.Эффект такой.На самом деле, есть более офигенные функции, такие как привязка данных, которая требует пост -обработка.Доступ к стандартной модели данных терминала и т. д., инвестиции всей ссылки могут реализовать разработку кода 0. Для получения подробной информации, пожалуйста, обратитесь к статье нашей команды.«Как разумно генерируется 79,34% кода модуля Double Eleven».
Щелкните код в правом верхнем углу, чтобы просмотреть сгенерированный код.Вы можете видеть, что поддерживается множество языков, и вы также можете добавить собственные DSL:
пятый шаг:
Наконец, скопируйте сгенерированный код в свой проект (на самом деле, эта операция копирования совершенно не нужна, хотя для ее решения также можно установить плагин vscode, но это все равно не является эффективным решением, когда происходит итерация, это только Решение с низким кодом еще не является реализацией без кода).
Разделение пользовательского интерфейса и логики
Код пользовательского интерфейса был сгенерирован с помощью ImgCook. Эта часть кода не имеет бизнес-логики, чистого отображения пользовательского интерфейса и изменений состояния, таких как интерактивная анимация. Поэтому необходима эффективная структура для разделения пользовательского интерфейса и логических данных, что более важно. удобно для управления кодом. Здесь я изучил идеи интерфейса Flux и Redux с помощью опыта клиента и просто реализовал структуру разделения пользовательского интерфейса и логики данных Таким образом, функции каждого компонента связаны и не будут связаны друг с другом, даже если компоненты пользовательского интерфейса часто настраиваются Обновление также не будет иметь никакого эффекта:
- Компонентный дизайн, разработка компонентов должны быть разделены на два слоя:
- Компонент отображения Компонент представления, это чистый компонент пользовательского интерфейса, взаимодействующий с пользователями извне.Он может отображать только бизнес-данные через свойства и обратную связь через обратный вызов, и не должен включать бизнес-логику;независимая поддержка может быть сгенерирована imgcook или реализована на аутсорсинге ;
- Компонент логики Presentation Component, используемый для внешних сервисов, формирует элементы страницы с другими компонентами, отвечает за получение данных, контроль состояния и последующую передачу данных компонентам пользовательского интерфейса через реквизиты.
- Дизайн действий бывает двух видов:
- Сообщения о поведении для облегчения связи между компонентами;
- Сообщения запроса данных, используемые логическими компонентами, и отображение состояния компонента управления.
- Логические компоненты должны стараться не обновлять состояние через пропсы, должен быть только один слушающий интерфейс, а обновление должно происходить по данным.
- Основной код дистрибутива реализован в LogicManager;
- Интерфейс стандартизирован через Typescript и реализован через аннотации.
#### PipCook
Кстати, давайте прорекламируем еще один продукт нашей команды, который более склонен к back-end алгоритмостроению, поэтому у меня нет опыта его использования, и я не изучал его глубоко. Подробнее о пипкуке см. Pipcook Github.
С миссией «нулевой порог для фронтенд-инженеров для применения возможностей машинного обучения» и видением «привести область фронтенд-технологий к интеллекту», PipCook превратилась в универсальную платформу разработки алгоритмов фронтенда от обработки данные, обучающие модели для развертывания службы. Pipcook сосредоточится на фронтенд-области, всегда придерживаясь принципа «разработка с точки зрения фронтенд-инженеров, дружественных к фронтенд-инженерам», и в конечном итоге будет способствовать развитию фронтенд-индустрии с поддержкой машинного обучения.
Присоединяйтесь к нам
Кроме того, рекламируйте для нашей команды, если вы заинтересованы в нашей работе, независимо от того, есть ли вы внешни или на стороне клиентаПрисоединяйтесь к нам.
Суммировать
За последний год я освоил много front-end технологий и смог соответствовать требованиям поста, но этого далеко не достаточно.Фронтенд-технологий еще много-много.Мне нужно учиться и применяйте их в соответствии с реальными потребностями. Создайте большую ценность.
Дорога в будущее еще очень длинная.После объединения с ИИ техническое поле было расширено, и есть много вещей, которые нужно изучить. Необходимо не только продолжать завершать стек передовых технологий, но также необходимо изучать знания в области машинного обучения, НЛП, нейронных сетей и т. д., а также входить в команду интеллектуального строительства переднего плана в будущем.