стек в разработке что это
Что такое стек технологий. Объясняем простыми словами
Стек технологий (от англ. stack — «стопка») — это набор технологий, на основе которых разрабатывается сайт или приложение.
Стек включает в себя языки программирования, фреймворки (программная среда для разработки), системы управления базами данных, компиляторы (переводят текст, написанный на языке программирования, в набор машинных кодов) и так далее.
Выбор конкретного стека зависит от архитектуры проекта, сложности и функциональности сайта, системных требований — какую выбрать операционную систему и систему управления базами данных, какой использовать веб-сервер и язык программирования.
Например, для веб-разработки стек технологий может выглядеть так:
Примеры употребления на «Секрете»
«ИТ-специалисты должны чётко представлять, что ключевое в EdTech — открытость API, возможность интегрироваться с другими платформами, а также использование современного стека технологий».
(Основательница Smart School Pro Елена Игнатьева — о типичных ошибках образовательных стартапов.)
«Если применить подход в лоб и ориентироваться только на цену, то вы рискуете получить команду, которая не даст вам искомых показателей эффективности. К примеру, при выборе рекламного агентства следует обратить внимание на размер и опыт команды, стек используемых технологий, клиентский портфель и отзывы».
(CEO Realweb Partners Эмин Аветисян — об ошибках офлайновых компаний при выходе в онлайн.)
Нюансы
Любое веб-приложение состоит из двух частей — клиентской и серверной. Клиентская сторона охватывает всё, что пользователи могут видеть на экране.
Важнейшие элементы технологического стека в клиентской части:
Серверная часть приложения готовит данные для клиентской части. Здесь придётся выбрать:
Выбранные технологии будут определять функционал продукта и то, можно ли будет его масштабировать в будущем. Также от выбранного стека будут зависеть оплата специалистов и время на разработку.
Если клиент планирует продавать одежду через небольшой онлайн-магазин, ему не понадобятся параллельная обработка больших объёмов данных (noSQL) и механизм распределения нагрузки (load balancing), заточенный на одновременную поддержку 1 млн пользователей. В то же время клиенту, который планирует продавать тысячи товаров в день, не подойдёт решение на базе бесплатного движка сайта (CMS) с дешёвым хостингом.
О стеке простыми словами — для студентов и просто начинающих
Привет, я студент второго курса технического университета. После пропуска нескольких пар программирования по состоянию здоровья, я столкнулся с непониманием таких тем, как «Стек» и «Очередь». Путем проб и ошибок, спустя несколько дней, до меня наконец дошло, что это такое и с чем это едят. Чтобы у вас понимание не заняло столько времени, в данной статье я расскажу о том что такое «Стек», каким образом и на каких примерах я понял что это такое. Если вам понравится, я напишу вторую часть, которая будет затрагивать уже такое понятие, как «Очередь»
Теория
На Википедии определение стека звучит так:
Стек (англ. stack — стопка; читается стэк) — абстрактный тип данных, представляющий собой список элементов, организованных по принципу LIFO (англ. last in — first out, «последним пришёл — первым вышел»).
Поэтому первое, на чем бы я хотел заострить внимание, это представление стека в виде вещей из жизни. Первой на ум мне пришла интерпретация в виде стопки книг, где верхняя книга — это вершина.
На самом деле стек можно представить в виде стопки любых предметов будь то стопка листов, тетрадей, рубашек и тому подобное, но пример с книгами я думаю будет самым оптимальным.
Итак, из чего же состоит стек.
Стек состоит из ячеек(в примере — это книги), которые представлены в виде структуры, содержащей какие-либо данные и указатель типа данной структуры на следующий элемент.
Сложно? Не беда, давайте разбираться.
На данной картинке схематично изображен стек. Блок вида «Данные/*next» и есть наша ячейка. *next, как мы видим, указывает на следующий элемент, другими словами указатель *next хранит адрес следующей ячейки. Указатель *TOP указывает на вершину стек, то есть хранит её адрес.
С теорией закончили, перейдем к практике.
Практика
Для начала нам нужно создать структуру, которая будет являться нашей «ячейкой»
Новичкам возможно будет не понятно, зачем наш указатель — типа comp, точнее сказать указатель типа структуры comp. Объясню, для того чтобы указатель *next мог хранить структуру comp, ей нужно обозначить тип этой структуры. Другими словами указать, что будет хранить указатель.
После того как у нас задана «Ячейка», перейдем к созданию функций.
Функции
Функция создания «Стека»/добавления элемента в «Стек»
При добавлении элемента у нас возникнет две ситуации:
Разберем чуть чуть по-подробнее.
Во-первых, почему функция принимает **top, то есть указатель на указатель, для того чтобы вам было наиболее понятно, я оставлю рассмотрение этого вопроса на потом. Во-вторых, по-подробнее поговорим о q->next = *top и о том, что же означает ->.
-> означает то, что грубо говоря, мы заходим в нашу структуру и достаем оттуда элемент этой структуры. В строчке q->next = *top мы из нашей ячейки достаем указатель на следующий элемент *next и заменяем его на указатель, который указывает на вершину стека *top. Другими словами мы проводим связь, от нового элемента к вершине стека. Тут ничего сложного, все как с книгами. Новую книгу мы кладем ровно на вершину стопки, то есть проводим связь от новой книги к вершине стопки книг. После этого новая книга автоматически становится вершиной, так как стек не стопка книг, нам нужно указать, что новый элемент — вершина, для этого пишется: *top = q;.
Функция удаления элемента из «Стека» по данным
Данная функция будет удалять элемент из стека, если число Data ячейки(q->Data) будет равна числу, которое мы сами обозначим.
Здесь могут быть такие варианты:
Для лучшего понимания удаления элемента проведем аналогии с уже привычной стопкой книг. Если нам нужно убрать книгу сверху, мы её убираем, а книга под ней становится верхней. Тут то же самое, только в начале мы должны определить, что следующий элемент станет вершиной *top = q->next; и только потом удалить элемент free(q);
Если книга, которую нужно убрать находится между двумя книгами или между книгой и столом, предыдущая книга ляжет на следующую или на стол. Как мы уже поняли, книга у нас-это ячейка, а стол получается это NULL, то есть следующего элемента нет. Получается так же как с книгами, мы обозначаем, что предыдущая ячейка будет связана с последующей prev->next = q->next;, стоит отметить что prev->next может равняться как ячейке, так и нулю, в случае если q->next = NULL, то есть ячейки нет(книга ляжет на стол), после этого мы очищаем ячейку free(q).
Так же стоит отметить, что если не провести данную связь, участок ячеек, который лежит после удаленной ячейки станет недоступным, так как потеряется та самая связь, которая соединяет одну ячейку с другой и данный участок просто затеряется в памяти
Функция вывода данных стека на экран
Самая простая функция:
Здесь я думаю все понятно, хочу сказать лишь то, что q нужно воспринимать как бегунок, он бегает по всем ячейкам от вершины, куда мы его установили вначале: *q = top;, до последнего элемента.
Главная функция
Хорошо, основные функции по работе со стеком мы записали, вызываем.
Посмотрим код:
Вернемся к тому, почему же в функцию мы передавали указатель на указатель вершины. Дело в том, что если бы мы ввели в функцию только указатель на вершину, то «Стек» создавался и изменялся только внутри функции, в главной функции вершина бы как была, так и оставалась NULL. Передавая указатель на указатель мы изменяем вершину *top в главной функции. Получается если функция изменяет стек, нужно передавать в нее вершину указателем на указатель, так у нас было в функции s_push,s_delete_key. В функции s_print «Стек» не должен изменяться, поэтому мы передаем просто указатель на вершину.
Вместо цифр 1,2,3,4,5 можно так-же использовать переменные типа int.
Заключение
Полный код программы:
Так как в стек элементы постоянно добавляются на вершину, выводиться элементы будут в обратном порядке
В заключение хотелось бы поблагодарить за уделенное моей статье время, я очень надеюсь что данный материал помог некоторым начинающим программистам понять, что такое «Стек», как им пользоваться и в дальнейшем у них больше не возникнет проблем. Пишите в комментариях свое мнение, а так же о том, как мне улучшить свои статьи в будущем. Спасибо за внимание.
Что такое стек
И почему так страшен стек-оверфлоу.
Постепенно осваиваем способы организации и хранения данных. Уже было про деревья, попробуем про стеки. Это для тех, кто хочет в будущем серьёзно работать в ИТ: одна из фундаментальных концепций, которая влияет на качество вашего кода, но не касается какого-то конкретного языка программирования.
👉 Стек — это одна из структур данных. Структура данных — это то, как хранятся данные: например, связанные списки, деревья, очереди, множества, хеш-таблицы, карты и даже кучи (heap).
Как устроен стек
Стек хранит последовательность данных. Связаны данные так: каждый элемент указывает на тот, который нужно использовать следующим. Это линейная связь — данные идут друг за другом и нужно брать их по очереди. Из середины стека брать нельзя.
👉 Главный принцип работы стека — данные, которые попали в стек недавно, используются первыми. Чем раньше попал — тем позже используется. После использования элемент стека исчезает, и верхним становится следующий элемент.
Классический способ объяснения принципов стека звучит так: представьте, что вы моете посуду и складываете одинаковые чистые тарелки стопкой друг на друга. Каждая новая тарелка — это элемент стека, а вы просто добавляете их по одной в стек.
Когда кому-то понадобится тарелка, он не будет брать её снизу или из середины — он возьмёт первую сверху, потом следующую и так далее.
🤔 Есть структура данных, похожая на стек, — называется очередь, или queue. Если в стеке кто последний пришёл, того первым заберут, то в очереди наоборот: кто раньше пришёл, тот раньше ушёл. Можно представить очередь в магазине: кто раньше её занял, тот первый дошёл до кассы. Очередь — это тоже линейный набор данных, но обрабатывается по-другому.
Стек вызовов
В программировании есть два вида стека — стек вызовов и стек данных.
Когда в программе есть подпрограммы — процедуры и функции, — то компьютеру нужно помнить, где он прервался в основном коде, чтобы выполнить подпрограмму. После выполнения он должен вернуться обратно и продолжить выполнять основной код. При этом если подпрограмма возвращает какие-то данные, то их тоже нужно запомнить и передать в основной код.
Чтобы это реализовать, компьютер использует стек вызовов — специальную область памяти, где хранит данные о точках перехода между фрагментами кода.
Допустим, у нас есть программа, внутри которой есть три функции, причём одна из них внутри вызывает другую. Нарисуем, чтобы было понятнее:
Программа запускается, потом идёт вызов синей функции. Она выполняется, и программа продолжает с того места, где остановилась. Потом выполняется зелёная функция, которая вызывает красную. Пока красная не закончит работу, все остальные ждут. Как только красная закончилась — продолжается зелёная, а после её окончания программа продолжает свою работу с того же места.
А вот как стек помогает это реализовать на практике:
Программа дошла до синей функции, сохранила точку, куда ей вернуться после того, как закончится функция, и если функция вернёт какие-то данные, то программа тоже их получит. Когда синяя функция закончится и программа получит верхний элемент стека, он автоматически исчезнет. Стек снова пустой.
С зелёной функцией всё то же самое — в стек заносится точка возврата, и программа начинает выполнять зелёную функцию. Но внутри неё мы вызываем красную, и вот что происходит:
При вызове красной функции в стек помещается новый элемент с информацией о данных, точке возврата и указанием на следующий элемент. Это значит, что когда красная функция закончит работу, то компьютер возьмёт из стека адрес возврата и вернёт управление снова зелёной функции, а красный элемент исчезнет. Когда и зелёная закончит работу, то компьютер из стека возьмёт новый адрес возврата и продолжит работу со старого места.
Переполнение стека
Почти всегда стек вызовов хранится в оперативной памяти и имеет определённый размер. Если у вас будет много вложенных вызовов или рекурсия с очень большой глубиной вложенности, то может случиться такая ситуация:
Переполнение — это плохо: данные могут залезать в чужую область памяти и записывать себя вместо прежних данных. Это может привести к сбою в работе других программ или самого компьютера. Ещё таким образом можно внедрить в оперативную память вредоносный код: если программа плохо работает со стеком, можно специально вызвать переполнение и записать в память что-нибудь вредоносное.
Стек данных
Стек данных очень похож на стек вызовов: по сути, это одна большая переменная, похожая на список или массив. Его чаще всего используют для работы с другими сложными типами данных: например, быстрого обхода деревьев, поиска всех возможных маршрутов по графу, — и для анализа разветвлённых однотипных данных.
Стек данных работает по такому же принципу, как и стек вызовов — элемент, который добавили последним, должен использоваться первым.
Что дальше
А дальше поговорим про тип данных под названием «куча». Да, такой есть, и с ним тоже можно эффективно работать. Стей тюнед.
Как правильно выбрать технологический стек для своего проекта
Технический лид в компании Proxify
Запуск каждого IT-проекта характеризуется планированием и принятием решений на первых этапах развития. Они очень важны и оказывают влияние на любой проект, поскольку предопределяют его будущее. Во время этих этапов, например, происходит выбор технологического стека.
Технологический стек кардинально влияет на любой IT-проект. В зависимости от технологического стека меняется время, качество и стоимость разработки. Более того, он влияет на масштабируемость, поэтому если разработка проекта велась на плохо подобранном технологическом стеке, это может вызвать ряд проблем в будущем. Именно поэтому нет ничего страшного, если вам потребуется больше времени на выбор, чем вы планировали.
В этой статье мы рассмотрим, что такое технологический стек веб-приложения, какие технологии доступны для выбора, их преимущества и недостатки, отметим, какие технологии подходят для разных проектов. Также в статье вы найдёте рекомендации о том, как выбрать правильный стек технологий.
Что такое технологический стек
Технологический стек — это набор языков программирования, фреймворков и ПО, необходимых для разработки приложения.
Поскольку веб-приложения состоят из клиентской и серверной частей, требования к их функциональности меняют языки программирования, фреймворки и ПО, с помощью которых будет вестись разработка. Другими словами, требования к функциональности клиентской и серверной частей влияют на технологический стек.
Клиентская сторона — это видимая часть веб-приложения, с которой взаимодействуют пользователи. Есть 3 главных элемента разработки клиентской части любого веб-приложения:
Если говорить о фреймворках, чаще всего для разработки клиентской части любого веб-приложения используются Bootstrap и React.js.
Серверная часть веб-приложения — это то, что не видит пользователь, потому что она находится под клиентской частью. Для разработки серверной части используются:
Требования к клиентской и серверной части должны быть заблаговременно утверждены и приняты во внимание во время формирования технологического стека. Первоначальный этап развития проекта не ограничивается только выбором технологического стека, вам также необходимо будет определиться со структурой приложения.
Тут мы рассмотрим, что такое технологический стек клиентской части.
Сравнение Frontend-фреймворков
Наиболее распространенными фреймворками являются React Angular и Vue.js. Они способны управлять 3 главными элементами клиентской части веб-приложения.
Ниже мы рассмотрим React, Angular и Vue.js, выделим их сильные и слабые стороны и рассмотрим, для каких веб-приложений они лучше всего подходят.
React
React — это UI-библиотека, которая была создана компанией-гигантом Facebook и которая более чем за 7 лет существования собрала вокруг себя многомиллионное сообщество. В отличие от Angular, React не является фреймворком. Именно поэтому он используется при разработке простых веб-приложений. React удобен при разработке сложной логики клиентской части, особенно когда есть очень много повторно используемых компонентов веб-приложения.
Экосистема этой UI-библиотеки состоит из множества элементов. JSX, например, очень полезен при разработке. Кстати, если вам необходимо мобильное приложение, можно использовать React Native, созданный специально для мобильных приложений.
Низкая стоимость и быстрые сроки разработки по сравнению с разработкой веб-приложения на Angular являются главными преимуществами этой UI-библиотеки. Более того, поскольку это очень распространенная технология, трудности при поиске квалифицированного React-программиста не возникнут. Это очень популярная UI-библиотека, которая вряд ли перестанет пользоваться спросом в ближайшие 10 лет из-за того, что поддерживается Facebook и имеет многомиллионное сообщество.
Вам стоит остановить свой выбор на React если:
React не стоит выбирать, если вы хотите, чтобы ваше будущее веб-приложение имело расширенную логику или у вас нет возможности нанять опытного разработчика. Поскольку эта UI-библиотека не требует написания качественного кода, часто веб-приложения получаются с багами и другими недостатками. Именно поэтому вам необходим senior-разработчик, который позаботится о качестве кода.
Angular
Angular является самым главным конкурентом React. Это фреймворк, который идеально подходит для комплексных веб-приложений с расширенной логикой. Он поддерживается Google, поэтому явно будет пользоваться большой популярностью в течение следующих 10 лет.
У этого фреймворка логика, шаблон и стили разделены на 3 файла. Этот фреймворк также очень хорошо интегрируется с MVC.
Разработка веб-приложений на Angular более длительная и качественная, чем разработка на React, потому что этот фреймворк требует планировать разработку еще до ее начала.
Увеличение стоимости и времени разработки веб-приложения на Angular компенсируется высоким качеством конечного веб-приложения. Главным недостатком разработки веб-приложения на Angular является то, что очень тяжело найти программистов, которые знают этот фреймворк. Дело в том, что изучать Angular очень сложно.
Вам стоит остановить свой выбор на Angular если:
Angular является самым худшим вариантом разработки веб-приложения, если оно нацелено на максимально простой интерфейс и предполагает большое количество манипуляций с DOM.
Vue.js
Можно сказать, что Vue.js собрал в себе все самое лучшее от двух вышеперечисленных технологий. Vue.js — не фреймворк, а UI-библиотека. По сравнению с React и Angular это очень молодая технология. У этой UI-библиотеки нет многомиллионного активного сообщества и нет поддержки компании-гиганта вроде Facebook. Из-за этого нет уверенности в том, что Vue.js будет таким же популярным, как React и Angular через 10 лет.
Vuex в Vue.js гораздо легче поддерживать, чем Redux в React. Готовых решений у этой UI-библиотеки также очень мало.
Как показывает практика, Vue.js является прекрасной малобюджетной технологией. Благодаря тому, что он проще, чем React и Angular, нет необходимости в опытном разработчике. Эта UI-библиотека прекрасно подходит, если вам необходимо разработать небольшое веб-приложение максимально быстро.
Вам стоит остановить свой выбор на Vue.js, если:
На данный момент Vue.js пользуется большой популярностью среди небольших компаний-разработчиков.
JavaScript или TypeScript?
При разработке клиентской части веб-приложения необходимо определиться с основным языком разработки. Есть два варианта — JavaScript и TypeScript, каждый из которых предпочтительнее использовать в разных случаях.
Например, если вы планируете разрабатывать веб-приложение на Angular, необходимо использовать TypeScript. В случае разработки веб-приложения на Vue.js и React необходимости в Typescript нет.
Использование TypeScript позволяет сэкономить время разработки веб-приложения благодаря уменьшению числа ошибок в коде. Он также имеет значительное влияние на процесс обслуживания приложения и упрощает его. Технология Typescript поддерживается всеми современными фреймворками. В случае, когда бэкенд веб-приложения не готов, однако вам известно, какие данные вы получите, TypeScript позволяет разработать пользовательский интерфейс заранее.
Тем не менее, у этой технологии есть один существенный недостаток. Её очень сложно настроить при разработке веб-приложения на React и Vue.js. Поэтому неопытные разработчики не используют ее в своей работе при создании веб-приложений. Опытным командам веб-разработчиков намного легче справиться с этой проблемой.
Технология TypeScript была создана компанией-гигантом Microsoft, поэтому она будет актуальной еще в течение очень долгого периода времени, возможно даже дольше, чем React и Angular.
Остановив свой выбор на TypeScript, вы значительно упростите разработку. Выбор этой технологии также поможет избежать большого количества очевидных проблем, которые возникают в случае использования Javascript.
CSS, Less или Sass?
Развитие фреймворков дошло до такого уровня, что сегодня вы можете самостоятельно решать, как писать стили в веб-приложении. Фреймворки обеспечивают разработчиков всеми важными элементами технологического стека.
Например, вести разработку большого веб-приложения на чистом CSS максимально неудобно. Процесс разработки большого веб-приложения будет очень сильно затянут из-за очень больших файлов CSS.
Использование препроцессора, такого как Less или Sass, упростит процесс разработки. Они максимально легко реализовываются в веб-приложениях, которые используют Webpack. Использование миксинов, наследований и переменных возможно как в Less, так и Sass. Из других преимуществ препроцессора — более чистый код.
Использование препроцессоров при разработке веб-приложений пользуется большой популярностью среди широкого круга компаний-разработчиков. Препроцессоры позволяют сэкономить время и не бояться проблем с поддержкой веб-приложения, когда оно будет масштабироваться.
Как сделать правильный выбор стека технологий для разработки веб-приложения
Ниже вы найдете советы о том, как правильно выбрать технологический стек для разработки веб-приложения.
Размер веб-приложения
Размер веб-приложения очень сильно влияет на разработку. Чем больше размер веб-приложения, тем более комплексная его разработка.
Срок разработки веб-приложения
Количество времени, которое есть на разработку веб-приложения, также влияет на выбор стека технологий. При небольшом количестве времени разработка веб-приложения должна вестись с помощью более простых технологий, для которых нет необходимости в планировании, а также наличия опыта у разработчиков.
Если на разработку веб-приложения выделено достаточно много времени, выбирать стек технологий стоит исходя из других факторов.
Безопасность веб-приложения
Сейчас очень сильно выросло количество кибератак на веб-приложения. Именно поэтому необходимо обращать максимум внимания на его безопасность.
Масштабируемость веб-приложения и его поддержка
При разработке веб-приложения важно думать о его будущем, в частности, о масштабировании и поддержке. Это не настолько трудная задача, однако многие разработчики забывают принять этот фактор во внимание при выборе стека технологий. Также не менее, важно обращать внимание на желаемую производительность веб-приложения.
Заключение
Технологический стек очень сильно влияет на будущее любого веб-приложения. Он влияет на стоимость его разработки, время разработки, масштабируемость и многие другие нюансы.
Ваш выбор технологий зависит от предназначения готового проекта. Поэтому изначально необходимо ознакомиться с преимуществами и недостатками всех доступных технологий, а затем посоветоваться с опытными разработчиками.