مروری بر فریمورک های Front-End

اول بریم سراغ یک سری اصطلاح و کلمه که داخل ارائه استفاده شده و بهتره قبل از تماشای فیلم باهاش اشنایی داشته باشیم و بررسی کنیم.

1- فریمورک (Framework): فریم ورک در اصطلاح به چارچوب نرم‌افزاری گفته می‌شود. یک فریم‌ورک مجموعه‌ای از کتابخانه‌های برنامه‌نویسی و احتمالا مجموعه‌ای از قوانین برای برنامه‌نویسی است.
برای مثال چارچوب «دات نت فریم ورک» محصولی از شرکت مایکروسافت است که حاوی هزاران کتابخانه‌ی کوچک به همراه قواعد و ابزارهایی برای توسعه‌ی برنامه‌های مختلف در آن است.
یک چارچوب یا فریم‌ورک به برنامه‌نویسان کمک می‌کند کدهای کمتری بنویسند و در زمان کمتری به نتیجه‌ی بهتری دست پیدا کنند. در چارچوب دات‌نت و فریم‌ورک مشابه آن، ماشین مجازی جاوا، این امکان وجود دارد که برنامه‌ی نوشته شده، روی سیستم‌عامل‌های گوناگون به صورت یکسان عمل کند.

منبع: رُکاوب

2- ریسپانسیو (Responsive): طراحی وب واکنش‌گرا (به انگلیسی: Responsive web design) (سرواژه:RWD) یک روش طراحی وب است که هدف آن نمایش مطلوب صفحه در طیف گسترده‌ای از دستگاه‌ها از تلفن‌های همراه تا نمایشگر کامپیوترهای رومیزی است. یک وب‌سایت طراحی شده به روش واکنش‌گرا با لایه‌های انعطاف‌پذیر، طراحی‌های شناور، تصاویر انعطاف‌پذیر و مدیا کوئری‌های CSS3 سازگار است. مفهوم شبکه‌های انعطاف‌پذیر این است که در آن برای اندازه عناصر صفحه به جای واحدهای مطلق مانند پیکسل یا پوینت از واحدهای نسبی مانند درصد استفاده می‌کنیم. اندازه تصاویر انعطاف‌پذیر نیز با واحدهای نسبی تعیین می‌گردد تا بیرون از عنصر نمایش‌دهنده خود نشان داده نشود. مدیا کوئری‌ها امکان استفاده از CSSهای مختلف برای صفحه براساس ویژگی‌های دستگاه نمایش‌دهنده (معمولاً براساس عرض مرورگر وب) فراهم می‌کنند.

منبع: ویکیپدیا

3- لس (Less): Less (گاهی اوقات به صورت LESS) یک زبان پویای style sheet است که می‌تواند به صورت شیوه نامه‌های آبشاری (CSS) کامپایل شود در سمت کلاینت یا سرور اجرا شود. Less توسط الکسیس سلیر طراحی شده‌است. Less از Sass تأثیر گرفته‌است و بر سینتکس جدیدتر "SCSS" از Sass تأثیر گذاشته‌است، که سازگار با سینتکس قالب‌بندی بلاک CSS-like است. Less متن‌باز است. اولین نسخهٔ آن با زبان روبی نوشته شده‌است؛ اما در نسخه‌های بعدی استفاده از روبی پایان یافت و با جاوا اسکریپت جایگزین شد.

4- سس (Sass): هم Sass و هم Less هر دو پیش‌پردازندهٔ CSS هستند که اجازه می‌دهند کد CSS به جای قواعد استاتیک در یک ساختار برنامه‌نویسی نوشته شود. Less الهام‌گرفته از Sass است. Sass به منظور ساده‌سازی و توسعه دادن CSS طراحی شده‌است، به طوری که چیزهایی ماند آکولاد از سینتکس حذف شده‌است. Less طراحی شده‌است تا نزدیکی به CSS ممکن باشد، و یک نتیجهٔ موجود CSS به صورت یک کد Less معتبر باشد.

منبع: ویکیپدیا

در ادامه پس از آشنایی با مفاهیم پایه و ابتدایی به معرفی محبوبترین و معروف ترین فریم های Front-End می پردازیم و مقایسه ای بین اونها خواهیم داشت.

فریم ورکهایی که به بررسی آنها می پردازیم عبارتند از

• Bootstrap
• Foundation
• Semantic UI
• UIkit

خب بریم سراغ ویدئو ارائه

برای دریافت هر کدوم از فریم ورک ها میتونید از آدرس هایی زیر استفاده کنید.

بوت استرپ : https://getbootstrap.com

فاندیشن: https://foundation.zurb.com

سمنتیک: https://semantic-ui.com

یو آی کیت: https://getuikit.com

و مدرن بوت استرپ: https://mdbootstrap.com

البته ادامه ارائه نکات و مباحث خوبی مطرح شد که خلاصه از اونهارو قرار میدم:

کتابها

و به نظرم مهم ترین قسمت ارائه معرفی کتابهای مفیدی بود که توسط دوستان معرفی شد.

1- Don't Make Me Think

2- ایده مامان

3- The Design of Everyday Things

4- تئوری رنگ ها (https://www.colormatters.com/color-and-design/basic-color-theory)

فریمورک ها و کتابخانه ها

معرفی فریمورک متریال دیزاین گوگل

آدرس: https://material.io

معرفی فریم ورک UIkit اپل

آدرس: https://developer.apple.com/library/archive/navigation

معرفی فریمورک AntDesign

آدرس: https://ant.design

معرفی کتابخانه D3 JS

آدرس: https://d3js.org

نرم افزارها

معرفی نرم افزار Axure

آدرس: https://www.axure.com

معرفی نرم افزار Just In My Mind

آدرس: https://www.justinmind.com

معرفی نرم افزار Adobe XD

آدرس: https://www.adobe.com/products/xd.html