15 июня 2007 в 01:08

Framework"и только для разработчиков?…

• Разработка веб-сайтов

• Перевод

Сегодня слово «framework» стало обыденным в web dev"е. Как только jQuery и Prototype, Rails и Django получили широкое распространение, кажется, что теперь каждый использует какой-нибудь framework для создания своего сайта.
Но что же такое framework? Они полезны программистам, или даже веб дизайнеры могут воспользоваться их преимуществами?..

Что такое “framework”?

Итак, давайте договоримся - хотя бы на протяжении этой статьи - считать, что “framework” - это набор инструментов, библиотек, хорошего кода, который поможет превратить рутинные задачи в модули, которые можно использовать неоднократно. Задача framework"а - позволить дизайнеру или разработчику сфокусироваться на задачах, являющимися уникальными в рамках данного проекта. Иначе говоря, не изобретать колесо раз за разом. Вобщем, это подход, выбранный вышеуказанными web и JavaScript framework"ами.

Framework для дизайнеров

Возможно, и вы сможете извлечь выгоду от аналогичной абстракции CSS кода в течение дизайна вашего сайта. Те, кто по достоинству смогут оценить данных подход - это дизайнеры, работающие над несколькими подобными друг другу сайтами. К тому же, дизайнеры, работающие в команде, могут работать, используя один и тот же framework. Например, я работаю в газете, и все наши 20 с небольшим сайта имеют много общего. Из-за того, что это, в основном, новостные сайты, они по определению больше схоже, чем различны. Но даже дизайнер-одиночка, который работает над совершенно разными проектами, может найти элементы, которые можно внести в его основной framework.

В Lawrence Journal-World, где я работаю, мы недавно создали CSS framework и обнаружили, что он значительно увеличил нашу производительность. Конечно, для его создания потребовалось потратить несколько дней, но как только он был готов, скорость, с которой мы могли создавать качественные страницы, резко возросла. Более того, с тех пор, как мы начали использовать наш framework, каждый дизайнер мог что-то исправить в чужой работе, и им уже не требовалось 20 минут, что понять, почему что-то написано именно так. Они просто погружались в работу.

Что именно можно абстрагировать?

Как только вы начнете создавать свой CSS framework, вы должны найти те вещи, что вы используете раз за разом в каждом проекте. Вся суть в том, чтобы собрать все это в одно место, следуя методу «Не повторяй себя». Это делает поддержку значительно легче, а также вы сможете немного сэкономить на трафике.
Несколько вещей, которые я принимаю во внимание в каждом своем проекте, это:

• Массовый сброс стандартных браузерных стилей. К примеру, установка margin и padding в 0 у всех элементов, отключение border’ов у frameset’ов и изображений, и т.д.
• Создание примерного типа оформления: margin’ы у блочных элементов, таких, как параграфы, заголовки, списки, и т.д.
• Создание простых стилей для форм.
• Создание нескольких CSS-классов, которые я постоянно использую, к примеру, .hide (где я устанавливаю display:none) и.mute (где я устанавливаю меньший размер шрифта и, иногда, более светлый цвет).

Есть также несколько других интересных возможностей. Многие дизайнеры зачастую используют одинаковую разметку и стили для создания страницы. Почему бы не перенести это в CSS-файл и составить его так, чтобы его было удобно использовать на нескольких сайтах одновременно. Yahoo сделала нечто подобное в Yahoo User Interface grids component. Когда мы создавали наш framework для Journal-World, мы сначала смотрели на реализацию этого компонента у YUI. Позже мы решили, что это не то, что нам нужно, но это послужило хорошим примером для нас и вдохновило на создание нашей собственной реализации. Мы остановились на 16-и блочном дизайне, который является настолько гибким, что мы смоги его использовать на каждых наших сайтах, даже учитывая то, что каждый наш сайт внешне немного отличается от другого.

К тому же, многие сайты используют одни и те же виджеты, такие как drop-down меню, закладки в навигации, кнопки, и т.д. Эти вещи хорошо подходят для абстракции. Помимо этого, вы можете выработать некоторые свои идиомы, как скажем, список фотографий, показывающийся в виде thumbnail’ов. Вы можете стандартизировать CSS класс “thumbnail-list”, и в следующий раз вам всего лишь потребуется вставить этот класс, чтобы получить работающий вариант.

Это действительно принесет мне пользу?

Имея такой framework, вы сможете быстро окунуться в создание новой страницы. Вы создаете новый (X)HMTL документ, подключаете framework, и вам уже не потребуется времени, чтобы избавиться от ненужных отступов, у вас уже будет нужная вам типографика, чистые формы, работающие виджеты и много другое!
Вероятно, что вам захочется как-то изменить внешний вид конретного сайта. Чтобы это осуществить, все что вам нужно, это добавить или изменить уже существующий стиль. К примеру, если ваш framework устанвливает стандартную панель с навигацией для каждого «ul» с классом “tabs”, который имеет серый фон и черные границы. Чтобы это изменить, вам всего лишь потребуется добавить (или изменить существующий) стиль. Например:
ul.tabs li { border: none; background-image: url("/images/tabs/site-specific-tab-look.jpg"); }

Как должен быть спроектирован CSS framework?

Существует несколько возможных путей для создания framework’a, но самый общий и, несомненно, самый удобный, это абстракция вашего главного CSS-файла в несколько отдельных файлов, каждый из которых будет играть свою роль. К примеру, вы можете создать страницу стилей, которая бы управлялась с типографикой, а другая со сбросом стандартных стилей. Красота данного подхода заключается в возможности подключения именно тех стилей, что вам нужны. Вы можете остановиться на 6-7 разных страниц стилей в вашем framework’е, но конкретный проект может не нуждаться в одной или двух из них, а значит, что их совсем не обязательно подключать. Тот framework, что мы создали у себя, состоит из 5 стилей:

• reset.css-отвечает за сброс стандартных стилей.
• type.css-отвечает за типографику.
• grid.css-отвечает за компоновку.
• widgets.css-отвечает за виждеты: tab’ы, drop-down меню и кнопки «читать далее».
• base.css-подключает все остальные страницы стилей, так что мы можем обращаться только к base.css из нашего (X)HTML документа, чтобы использовать весь framework.

Затем мы сохранили весь framework в отдельном месте и уже вызываем его с сайтов именно оттуда. Конечно, у нас есть несколько специфичных страниц стилей для каждого сайта, где мы переписываем или добавляем нужные стили.

Заключение

На практике, мы, веб дизайнеры, так же как и наши коллеги из мира программирования, имеем привычку часто повторятся. Мы каждый раз отключаем стандартные стили, пишем занового стили для tab’ов, и это повторяется от проекта к проекту. Потратьте немного времени на написание своего framework’а, абстрагируйте там то, что вы можете использовать несколько раз. Это поможет вам быстро начать создавать новую страницу, или поддерживать уже существующую. Позаботьтесь об этом, ведь это не требует особых знаний и не повредит вашим проектам, а главное, сэкономит время на создания дизайна следующего.

Фреймворк, будучи "каркасом" для создания и сопровождения программного проекта, облегчает задачу разработчика. Существует множество фреймворков для создания сайтов и для различных языков программирования, обладающих как плюсами, так и минусами. Хорошо известные СSS-фреймворки: Foundation и Bootstrap. Из современных PHP-фреймворков можно выделить Yii, Symfony и Laravel. Они дружелюбны не только к профессионалам, но и новичкам. Популярность и широкий функционал позволяет без особого труда найти полезную информацию по этим фреймворкам.

В наше время IT-технологии не стоят на месте, каждую минуту создаются новые сайты, приложения и разного рода программные продукты. Тысячи строк кода помогают компьютеру понять человека.

Зачастую, разработчик применяет одни и те же алгоритмы в разных проектах. И было бы не целесообразно тратить уйму времени на то, чтобы раз за разом писать одно и то же. Что же может облегчить эту задачу?

Существует множество определений термина «фреймворк». Рассмотрим некоторые из них и попытаемся найти то, что их объединяет.

Framework – это программная платформа, определяющая структуру программной системы, программное обеспечение, которое облегчает поставленную перед разработчиком задачу и объединяет разные компоненты большого программного проекта. Это такая структура, включающая в себя библиотеки кода, различное программное обеспечение, которые облегчают жизнь разработчика и способствуют объединению разных составляющих большого программного проекта. Фреймворк содержит базовые программные модули. Все специфичные компоненты реализуются разработчиком на их основе.

В переводе с английского, framework означает «каркас». Действительно, если сравнить создание программного проекта со строительством дома, то фреймворк – каркас и разработчику остается лишь навесить окна и стены.

Фреймворк предлагает разработчику уже встроенные классы:

• Для работы с базой данных
• Для создания функциональных форм
• Для описания логики и др.

Все это может использоваться в большинстве ваших проектов, при этом использование и подключение будет простым благодаря таким «каркасам».

Используя фреймворки не нужно писать с нуля десятки, а то и сотни тысяч строк, тем самым достигается большая производительность. Становится проще сопровождать проект, вносить изменения и исправлять ошибки, «склеивать» компоненты в более сложные системы. Фреймворк помогает организовать структурированную архитектуру проекта, т.е. все файлы будут находиться в порядке и на нужных местах.

Плюсы фреймворков

• Разработка на фреймворке позволяет добиться простоты сопровождаемости проекта.
• Проекты легко масштабируются и модернизируются.
• Решения на фреймворках работают гораздо быстрее.
• Решения на фреймворках превосходят самописные системы по безопасности.

Минусы фреймворков

• Многие функции реализовываются индивидуально, т.к. фреймворки содержат только базовые компоненты бизнес-логики.
• Требуется понимание бизнес-процессов.

Web-разработка и фреймворки

Одна из самых популярных областей применения фреймворков – создание сайтов, web-приложений и сервисов и это естественно. Главным преимуществом фреймворка является тот факт, что зачастую веб-сайты и приложения используют стандартизированную структуру организации компонентов. И создание такой структуры становится проще, если использовать фреймворки. Практически у любого сайта есть форма для авторизации. И каждый раз «изобретать велосипед» было бы не разумным решением.

В интернете мы можем найти огромное количество фреймворков для создания сайтов и для разных языков программирования. Одни предназначены для упрощения в разработке интерфейсов, другие помогают в написании логики программного проекта.

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

Одним из самых знаменитых HTML/CSS/JS-фреймворков, помогающих в разработке интерфейса сайта является Foundation , который состоит из CSS файлов и нескольких плагинов JQuery (JS-фреймворк).

Главным его конкурент - Bootstrap , на котором так же написано огромное количество проектов.

Стоит отметить основные плюсы данных фреймворков:

• Удобство
• Простота для новичков
• Популярность, а значит развитое сообщество
• Функционал

Другие фреймворки облегчают написание логики сайта и web-приложения или сервиса. Например, одними из самых популярных PHP-фреймворков являются:

• Yii : прост в освоении и использовании, высокая производительность относительно других php-фреймворков и пр. возможности.
• Symfony : мощная функциональность, развитое сообщество, большое преимущества перед другими php-фреймворками в разработке сложных проектов.
• Laravel : доступность, мощность, хороший функционал.

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

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

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

Фреймворк предоставляет прекрасную базу данных, которую можно использовать в своих программах для Windows и Linux. Он создает «рабочую среду», которая позволяет программам запускаться и функционировать вне существующих ограничений. Он также обеспечивает пользовательский интерфейс и управление данными.

Архитектура Framework

Архитектура - это стиль программного кода, который включает в себя конкретные элементы структуры. Это реализуется для обеспечения конкретной методологии внедрения в программу. Документы-классы, представленные в пакете Microsoft Foundation Classes (MFC), являются составляющими архитектуры. По существу, архитектура реализует связи между объектами. К числу таких связей можно отнести наследственность, инкапсуляцию и т.д.

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

Шаблоны проектирования

Шаблоны использования конкретной архитектуры являются одновременно и методологией. Их использование обеспечивает особый метод взаимодействия. Однако если вы используете модели поведения, всё приложение будет придерживаться именно этой реализации. Базовые шаблоны проектирования являются довольно примитивными и их очень легко запомнить. Они необязательно должны быть сложными и основываться на том, что компоненты и объекты взаимодействуют друг с другом.

На самом деле все намного проще, чем могло многим показаться, но для порядку я начну по порядку…. Фреймворк это программная платформа облегчающая разработку и объединяющая разные компоненты большого программного проекта. Ну а если более понятным языком, это набор шаблонов, инструментов, которые в разы повышают скорость разработки за счет заранее подготовленного и проверенного кода. Фреймворков огромное количество, но как всегда есть определенные лидеры, так же вы сами можете написать свой фреймворк. Как вы уже догадались они бывают разные не только в плане того кто их написал, а конкретно в плане языка, например существуют фреймворки по языкам html/css и отдельно фреймворки на php и на многих других языках.

Давайте разберем на примере их пременения, предположим вы решили сделать сайт, первым делом вы начинаете делать верстку сайта, вы можете прописать модульную сетку сами вручную, а можете взять уже готовую под свой проект из фреймворка, это значительно сократит ваше время ведь, по сути, каждый раз делая новый сайт, вы делаете одну и ту же работу, ну а если вы занимаетесь этим постоянно, то 99 из 100 что у вас есть уже заготовленные вами же шаблоны или вы уже используете фреймворк. Я думаю тут наглядно раскрыта суть, то же самое если вы пишите движок сайта и компоненты, которые вы постоянно используете вы можете взять из фреймворка на php.

В чем же основные достоинства?

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

Несмотря на многообразие и распространенность в каждой области есть свои безусловные лидеры, и они не зря заслуживают свое внимание, если конкретно разговаривать о создании сайтов, то я отдал свой приоритет фреймворкам Bootstrap и Yii2, первый для front-end разработки на html, CSS, JS, а второй php фреймворк, я не утверждаю что они лучшие, но по моему скромному мнению они именно то, что надо.

Кому нужны фреймворки?

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

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

Дата публикации:2018-03-28

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

Фреймво́рк (англицизм неологизм от англ. framework букв. – каркас, структура) - программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта. Употребляется также слово «каркас».

Здесь записано общее определение, ведь бывает веб-программирование, а бывает прикладное. Соответственно, свои фреймворки есть и там, и тут. Но я на своем блоге говорю только о веб-программировании, поэтому о нем мы и поговорим.

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

Фреймворки в веб-разработке

Фреймворк привязан к языкам, на которых он написан, поэтому и говорят, например: js-фреймворк, php-framework и т.д. Как правило, его создает один или несколько опытных разработчиков для того, чтобы в будущем использовать для своих целей. Некоторые фреймворки выкладывают в свободный доступ и их использование и кастомизация становятся доступными абсолютно для всех.

Пример свободно-распространяемого css-фреймворка — Bootstrap. С его помощью можно очень легко и быстро создать адаптивный шаблон, намного быстрее, чем с полного нуля. По сути, в полной версии фреймворка содержатся такие компоненты:

• табы-переключатели;
• модальные окна, оповещения;
• адаптивная резиновая сетка;
• кнопки, формы, таблицы и т.д.;

То есть при использовании css-фреймворка вам нет нужды писать код с нуля, очень многое уже реализовано, остается только применить нужные стилевые классы к элементам и все будет работать. Заметьте, что Bootstrap это не только css, но и js-framework. Подробнее о Bootstrap вы можете почитать .

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

У каждого фреймворка есть своя цель. Например, Bootstrap идеально подходит для разработки адаптивных шаблонов, сайтов с поддержкой на мобильных устройствах, с помощью Yii можно легко реализовать функционал блога или интернет-магазина, Angular идеально подходит для разработки фронтенда у веб-приложений.

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

А какие вы хотите изучить фреймворки? Пишите в комментарии, может поделюсь ссылкой какой, где вы можете посмотреть уроки.