Об авторе: aoto Ant Financial Data Experience Техническая группа
То, что я сказал ниже, является личным мнением, которое относительно макро и поверхностно, в основном направлено на самих фронтенд-инженеров, без подробных технических и бизнес-деталей, пожалуйста, обращайтесь к ним внимательно.
Обзор функций
Front-end инженеры в первую очередьпрограммист, за которым следуетпрограммист, они работают в самом близком к пользователю месте и отвечают за взаимодействие человека с компьютером и пользовательский опыт.Хотя они и называются «интерфейсными», границы их работы на самом деле очень широки. Заглядывая в будущее, я думаю, что передовая работа будет по-прежнему дифференцирована и интегрирована.Разделение труда было основной движущей силой эффективного социального сотрудничества со времен промышленной революции, и эта форма должна сохраняться в течение длительного времени. в будущем. Дифференциация и слияние — это непрерывная эволюция, взаимное поглощение и трансформация, но я не думаю, что основные вещи сильно изменятся.
Вид
- Продолжайте дифференцироваться (домен, отрасль, стек технологий)
- Продолжать интеграцию (конечные технологии, полнофункциональные веб-технологии, искусственный интеллект и конечные технологии)
- Ядро остается неизменным (сущность информатики, мысли и практика разработки программного обеспечения, профессиональные качества программиста)
1. Продолжайте различать
поле
Сфера интерфейса будет по-прежнему дифференцирована. Например, внутренний интерфейс Alibaba уже имеет пять основных направлений: средний и внутренний, графика, конечные технологии, пан-узлы и услуги для разработчиков. Каждое основное направление также будет подразделяются. Вот несколько примеров:
- Миддл и бэк-офис: облачная консоль, платформа управления информацией и активами, внутренняя платформа управления исследованиями и разработками, платформа искусственного интеллекта и машинного обучения, платформа анализа данных исследований и разработок, внутренняя информационная платформа предприятия и т. д. Конкретные продукты, такие как Alibaba Cloud Console, ERP, PAI, DeepInsight, Alibaba Inside and Out, Basecamp и т. д.
- Графика: есть базовые графические библиотеки, 3D-графика, визуализация данных, блок-схемы и т. д. Конкретные продукты, такие как G2, DataV, Alibaba Cloud City Brain, интеллектуальная карта планирования трафика Didi, большой экран Double Eleven и т. д.
- Терминальные технологии: мобильный терминал (iOS, Android, MobileWeb, PWA, апплет), ПК-терминал (клиент, веб-терминал), компьютер с сенсорным экраном, различные мониторы с большими экранами, смарт-браслеты для часов, смарт-автомобили и домашние экраны и т. д. Конкретные продукты, такие как приложение Taobao Alipay, основная станция ПК, мобильная станция H5, Arirang, VS Code, большой экран Double Eleven, версия UWP браузера UC, различные смарт-часы, браслеты, автомобили, домашние экраны и т. д.
- Pan-Node: есть цепочки инструментов, веб-фреймворки, IoT, клиенты (Electron, NW) и т. д. Конкретные продукты, такие как DEF/Atool/F2E-Test (инструменты разработчика переднего плана Alibaba), Egg.js, приложения Alibaba Cloud IoT, VS Code и т. д.
- Услуги разработчика: существуют платформы для разработки и обслуживания приложений, рынки компонентов и т. д. Конкретные продукты, такие как платформа для создания приложений Boat от Alibaba Cloud, рынок компонентов Fusion-Design, инструменты для разработки апплетов Alipay и т. д.
- ...
промышленность
- 2B
- Программное обеспечение для традиционных отраслей, таких как управление информацией, финансы, строительство, аэрокосмическая промышленность, водное хозяйство, финансы и производство, а также пять новых инноваций, предложенных Али: новая розничная торговля, новое производство, новые финансы, новые технологии и новая энергия, а также новые технологии, расширяющие возможности традиционных отраслей
- Программное обеспечение и услуги SAAS: такие как Teambition, Trello, DingTalk Enterprise Edition, Basecamp, Growing.io
- 2C
- Мобильное приложение: например, WeChat, Weibo
- Приложение для ПК: например, Google Doc
- Веб-сайты отображения продуктов: такие как Alibaba Cloud, официальный сайт Alipay
- ...
стек технологий
- Реагировать (Нативный)
- Угловой (NativeScript)
- Вью (Векс)
- ...
2. Продолжайте интеграцию
конечная технология
-
Интеграция интерфейсных и клиентских технических идей
- Компонентизация (составные строительные страницы)
- Крючки жизненного цикла компонентов (например, iOS ViewController)
- MV * (например, дизайн MVVM взят из среды разработки клиентов Microsoft)
-
Унификация большой передней части
- Технология виртуального DOM: React/ReactNative/ReactCanvas
- Унификация различных ядер и движков мобильных устройств: WebKit/V8
- Унификация технической веб-документации: Mozilla Web Docs
Веб-технология полного стека
- Интеграция front-end и back-end технических идей
- MV* (например, первый фреймворк MVC Backbone.js во внешнем интерфейсе создан разработчиками Ruby on Rails)
- АОП, внедрение зависимостей (Angular)
- GraphQL (SQL)
- IndexedDB (база данных)
- ...
Искусственный интеллект и терминальные технологии
- Интеграция искусственного интеллекта и передовых технологий
- Терминал — это узел, который, наконец, достигает пользователя.
- Конечный сбор данных -> внутреннее машинное обучение, анализ данных -> интеллектуальное представление рекомендаций
- Интеграция IoT и передовых технологий
- Умные домашние/автомобильные/промышленные устройства могут иметь экраны и могут быть основаны, например, наJerryScriptТакой механизм выполнения JS использует Node.js для разработки сетевых приложений.
3. Ядро остается без изменений
То есть суть компьютерной науки/мышление и практика разработки программного обеспечения/профессиональные качества программиста. Это не то, что можно охватить в одном абзаце, и здесь мы не будем подробно обсуждать это.
Резюме истории
Изучив эволюцию внешнего интерфейса, в основном обратитесь к соответствующим ресурсам внизу.На следующем рисунке кратко рассматривается история разработки программного обеспечения и внешнего интерфейса с 1995 года:
Будущее фронтенда
Те отрасли, в которых все меньше и меньше жилой площади
Иметь некоторый опыт сегментации
- Небольшие мобильные приложения: на рынке мобильных приложений доминируют некоторые гиганты, и жизненное пространство небольших приложений становится все меньше и меньше.
- Информационные навигационные веб-сайты для ПК (веб-сайты, магазины, форумы, жизнь): теперь ориентированы прежде всего на мобильные устройства, с интеллектуальными рекомендациями и развитой социальной сетью.
Нет взаимодействия с интерфейсом
Веб-интерфейс может делать некоторые вещи, в основном в рамках большого интерфейса.
- Разговорный интерфейс (голосовой видео разговор, голосовой поиск: WebRTC, голосовая библиотека с открытым исходным кодом:Common Voice)
- Сенсорный интерфейс (визуальный: WebAR/WebVR)
- Нет интерфейса, в будущем будет большое количество IoT-устройств (IoT имеет свои протоколы связи и спецификации, а работа фронтенда в фоновом режиме невидима для пользователей)
богатый интерфейс взаимодействия
Много работы нужно проделать на фронтенде
- Ежедневное офисное программное обеспечение (сложные приложения, медленно эволюционировавшие от настольных программ к веб-приложениям): Office, электронная почта, управление документами, дизайн продуктов, управление проектами, редактор кода.
- Программное обеспечение, поддерживающее большие данные/ИИ (сложные приложения, которые постепенно эволюционировали от программ для настольных компьютеров до веб-приложений): требуется большое количество серверных систем для анализа данных/машинного обучения.
- Проигрыватель/игра: H5 вместо Flash, например Web Audio, Web Video, Canvas
- Контейнер/DSL/ядро/мини-программа: контейнер Alipay/WeChat/DingTalk, ядро (т. е. ядро браузера UC, QQ) и его собственный DSL (если в будущем базовые возможности мобильных телефонов можно будет перенести в апплет, это очень фантазия)
- Сайты отображения информации о товарах (прикольные приложения): официальные сайты различных умных устройств, официальные сайты крупных предприятий
где будущее
Обзорная точка зрения
- Продолжать дифференцироваться (сегментация по полям, отраслевая сегментация, сегментация стека технологий)
- Продолжать интеграцию (интеграция конечных технологий, полный веб-стек, искусственный интеллект и интеграция конечных технологий)
- Ядро остается неизменным (сущность информатики, мысли и практика разработки программного обеспечения, профессиональные качества программиста)
несколько советов
- Обеспокоены развитием искусственного интеллекта, размышляя над возможными сценариями применения ТА во фронтенде
- Автоматически генерировать код для мокапов
- В соответствии с привычками использования пользователя автоматически создается интерфейс, который лучше всего соответствует привычкам пользователя.
- Собирайте пользовательские данные для обучения и анализа в режиме реального времени во внешнем интерфейсе, напримерdeeplearn.js
- ...
- Верьте в будущее внешнего интерфейса, силу Интернета
- WebKit
- V8
- Флексбокс:Yoga
- ...
- В сочетании с бизнес-характеристиками компании сосредоточьтесь на определенных аспектах внешнего интерфейса, в конце концов, технологии служат бизнесу.
Все вышесказанное является личным мнением.
связанные ресурсы
- Десять лет веб-разработки: http://www.infoq.com/cn/articles/web-development-ten-years
- Десять лет архитектуры приложений с графическим интерфейсом: https://segmentfault.com/a/1190000006016817
- Фронтенд-эпоха больших разговоров: https://halfrost.com/vue_ios_modularization/
- Письмо начинающему фронтенд-инженеру: https://zhuanlan.zhihu.com/p/28536429
- Курица и фронтенд-инженер: http://www.ruanyifeng.com/blog/2016/07/hen-and-front-end-engineer.html
- Прогноз ИИ Кай-Фу Ли: http://tech.sina.com.cn/it/2017-05-20/doc-ifyfkqks4361454.shtml
- «Взаимодействие без интерфейса»: https://book.douban.com/subject/26947799/
Постскриптум: Разработка фронтенда выходит за рамки воображения каждого. Будущее определенно непредсказуемо, и нет нужды делать прогнозы. Что нам нужно делать, так это хорошо справляться с тем, что перед нами. Добро пожаловать», давайте делиться с вами!
Если вы заинтересованы в нашей команде, вы можете подписаться на колонку или отправить свое резюме на 'tao.qit####alibaba-inc.com'.replace('####', '@'). идеалы могут присоединиться~
Оригинальный адрес:GitHub.com/proto team/no…