В этой статье будет представлен общий обзор того, как программное обеспечение работает в современном мире, и что означают все эти термины, которые вы, вероятно, часто слышите в разговорах. Это предназначено для нетехнической толпы (нетехнической в ​​том смысле, что вы знаете, как использовать технологии, но не знаете, как программировать/создавать технологии) — поэтому, если вы инженер-программист, читающий это, пожалуйста, не читайте чувствовать необходимость исправить каждую мелочь.

Горячая тенденция ИТ-программного обеспечения сегодня — это веб-приложения. Это означает, что вы получаете доступ к приложениям непосредственно в веб-браузере (например, Facebook), а не к значку на своем компьютере (например, Microsoft Word).

Веб-сайт против веб-приложения

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

Теперь это веб-приложение, вот где самое интересное. Веб-приложение включает в себя различные уровни и взаимодействие с пользователем. Примерами являются Facebook, Twitter, eBay и Gmail. Когда вы получаете к ним доступ, это включает в себя вход / выход, обработку платежей, запись на стенах ваших друзей, проверку электронной почты и т. д., то есть много взаимодействия с вашей стороны. Простой способ представить это так: веб-сайт показывает одну и ту же страницу всем. Если кто-то посещает веб-сайт местного бизнеса, он будет выглядеть одинаково для всех. Однако веб-приложение будет уникальным для каждого пользователя. Если вы войдете в Facebook, это будет сильно отличаться от того, если ваш друг войдет в Facebook. Вы увидите свои посты, свою ленту новостей, свои фотографии; и они увидят все свои. Это позволяет нам узнать, что Facebook предоставляет уникальную страницу каждому пользователю, который входит в систему, чтобы использовать платформу. Поскольку у них более миллиарда пользователей, это означает, что Facebook должен иметь возможность обслуживать более миллиарда различных версий Facebook!

Теперь, когда вы видите разницу между веб-сайтом (статическая неизменяемая информация) и веб-приложением, мы можем углубиться в разницу между двумя терминами, которые вы, вероятно, часто употребляете в разговоре с техническими друзьями: front- end и внутренняя часть. Вкратце, вот различия между ними:

Внешний интерфейс: это код, управляющий всем, что вы физически видите на экране. Например, вы видите большую синюю кнопку, которая меняет цвет при наведении на нее курсора? Это интерфейсный код, говорящий: «Сделайте эту кнопку синей, сделайте ее большой, и когда пользователь наведет курсор мыши, измените цвет». Это интерфейсный код, поскольку вы можете видеть, что происходит. Причина, по которой вы можете видеть это, заключается в том, что внешний код фактически выполняется (или запускается) непосредственно в вашем собственном веб-браузере! По этой причине его также часто называют «клиентским» кодом.

Внутренняя часть: это все, что находится в фоновом режиме, и что вы не можете видеть. Думайте об этом как об айсберге. Передняя часть — это вершина, а задняя часть — зверь под поверхностью, который содержит 90% массы. Когда вы вводите свое имя пользователя и пароль на Facebook и нажимаете «Войти», в фоновом режиме происходит МНОГО всего, чего вы не видите. Для вас это просто выглядит как «войдите, подождите секунду, и бум, я в деле». Однако в течение этой секунды ожидания весь внутренний код выполняет тяжелую работу. Это включает в себя меры безопасности, такие как аутентификация вашего имени пользователя и пароля и проверка того, что в вашем логине нет ничего «подозрительного». Это также включает в себя обеспечение того, чтобы правильный пользователь получил правильную учетную запись. Представьте, если бы вы попытались войти в Facebook, но вместо своей учетной записи вы вошли в чужую. Это будет большой проблемой! Внутренний код гарантирует, что все работает гладко и точно.

Хорошая метафора для этих двоих — представить автомобиль. В коде переднего конца написано «он синий, у него 4 двери и задний дворник». Помните, что интерфейсный код — это то, что мы можем физически «видеть». Внутренний код — это часть под айсбергом, которая выполняет тяжелую работу. Так вот это будет двигатель. Бэкенд-код — это настоящая движущая сила любого веб-приложения. Сделать раму автомобиля не так уж и сложно, но сделать функциональный автомобильный двигатель…

Зная эти различия, теперь мы также можем сказать, что веб-сайты содержат в основном интерфейсный код, поскольку за кулисами происходит немногое. Вы заходите на сайт местной компании и получаете то, что видите (и то же самое для всех). Поскольку вы можете физически видеть все на странице, это просто интерфейсный код.

В качестве реального примера я могу сказать вам, что весь интерфейсный код сводится к трем языкам, о которых вы, вероятно, слышали: HTML, CSS и Javascript. Вот разбивка того, что каждый делает:

- HTML – это существительное. Этот язык сообщает нам, что находится на странице. Это может быть текст, изображения, видео или что угодно. Используя наш пример с автомобилем, HTML говорит: «Есть машина».

– CSS – это прилагательное. Это описывает и стилизует существительное, которое дал нам HTML. Это сделает текст синим, изображение увеличится, а фон страницы станет красным. Для автомобиля HTML говорит «есть машина», а CSS говорит «машина синяя».

- Javascript. Это глагол. Javascript может заставить текст на экране двигаться, а изображение может появиться и исчезнуть. По сути, он может выполнять действия над существительными, которые дает нам HTML.

Итак, HTML говорит «Есть машина», CSS говорит «Машина синяя», а Javascript говорит «Машина движется вперед при нажатии на педаль».

После фронтенда идет бэкенд. Именно здесь на сцену выходят веб-приложения.

Веб-приложения имеют богатую внутреннюю часть, и, как правило, если вы берете весь код, написанный для веб-приложения (например, Facebook), огромная часть их кода находится на внутренней стороне (и, таким образом, вы не «видите» на экране ). Бэкэнд намного сложнее, чем передок (помните, что бэкенд — это двигатель, передок — это рама автомобиля и другие детали). В то время как во внешнем интерфейсе есть только 3 языка, которые всегда появляются на каждом веб-сайте, во внутреннем интерфейсе есть сотни возможных языков на выбор. Некоторые популярные внутренние языки (и компании, которые их используют) — это PHP (Facebook), Ruby (Twitter), Python (Google), Java (не путать с Javascript — они совершенно разные) и многие другие.

Назначение серверной части — обслуживать и «менять» переднюю часть. Например, когда вы входите в Facebook, вы видите свою учетную запись. После входа в систему вы видите свои собственные фотографии и друзей. Поскольку вы можете «видеть» изображения, это означает, что это интерфейсный код. Однако важным моментом является то, как этот код туда попал. Внутренний код выполнил тяжелую работу и сказал: «Хорошо, это Майк входит в систему. Я собираюсь отправить внешний код, который правильно показывает ему его собственную учетную запись, а не чью-то еще». По сути, внутренний код предназначен для «доставки» кода во внешний интерфейс, который вы можете видеть со своей стороны.

База данных

Наконец, есть база данных. База данных — это место, где хранится вся ваша информация. Ваши фотографии, посты, друзья и т. д. на Facebook хранятся в базе данных. Причина, по которой существует внутренний код, связана с базами данных. Базы данных чрезвычайно хороши и эффективны при хранении больших объемов информации (представьте, сколько в мире фотографий Facebook), поэтому их необходимо иметь. Однако интерфейсный код не может взаимодействовать с базой данных. Преимущество внутреннего кода заключается в том, что он может взаимодействовать как с как базой данных, И с внешним интерфейсом. Итак, когда вы входите в Facebook, происходит следующее: внутренний код проверяет информацию вашей учетной записи, извлекает ваши данные из базы данных (фотографии, сообщения и т. д.), затем передает код во внешний интерфейс, который отображает информация из базы данных на ваш экран!

Стек

Когда вы слышите, как разработчики говорят о «стеке», они имеют в виду именно это. Поскольку существует иерархия частей приложения, его красноречиво называют «стеком». Стек — это внешний код, внутренний код и база данных. Прелесть веб-разработки в том, что существует множество различных языков программирования, которые вы можете использовать. Некоторые лучше подходят для одних задач, другие лучше для других задач. Вы часто будете видеть или слышать, как разработчики краснеют, защищая свой выбор языка. Однако нет четкого ответа, кроме как в каждом конкретном случае. Вопрос «какой язык программирования лучше?» это все равно, что спросить «какая машина лучше?» без контекста. Если вы не знаете назначение автомобиля (путешествие? дрэг-рейсинг?), детали (сколько нужно пассажиров?) и остальные важные данные (кто за него платит? как долго он мне нужен?) — тогда вопрос бессмысленный.

Последний термин, который вы часто будете слышать, это «фреймворк».

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

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

Теперь, если вы используете каркас, представьте, что вам нужно построить автомобиль, но вы можете начать с предварительно собранного каркаса и шин. Это значительно снижает кривую обучения и позволит вам запустить работающую машину намного быстрее. Недостатком здесь является то, что, поскольку вы не строили все с нуля, у вас может не быть глубокого понимания систем, обеспечивающих бесперебойную работу автомобиля. Если есть проблема в будущем, есть большая вероятность, что вам придется обратиться к кому-то еще, чтобы решить проблему. Общепризнанно, что все веб-приложения должны использовать фреймворк для ускорения разработки, но разработчик должен потратить время и по-настоящему изучить, что происходит под капотом, чтобы лучше понять основу. Пока разработчик серьезно относится к изучению основных концепций, вы получите лучшее из обоих миров.

Подводя итог, интерфейсный код — это то, что вы видите на экране. Он делится на HTML (существительное), CSS (прилагательное) и Javascript (глагол). Внутренний код — это все, что находится под капотом веб-приложения. Серверная часть общается с базой данных, собирает соответствующие данные, а затем отправляет/генерирует правильный внешний код, который вы видите в своем браузере!