نرم افزار تک صفحه ای
SPA: Single Page Application

خیلی دیدین روی فیسبوک یا سایت های معروف بیشتر کارها بدون رفرش کل صفحه انجام میشه. حالا گاهی اون بالا هم کلک میزنن و آدرس تغییر میکنه ولی صفحه خیلی سریع به شما جواب میده و مثل قدیم با زدن روی هر دکمه یا لینک مجبور نیستی چند ثانیه صبر کنی تا اطلاعات جدید بیاد. این کارها رو قبل از اینا فقط برنامه نویس های فوق حرفه ای بلد بودن و تکنولوژی خیلی سخت و لج آور ajax لازم بود.

حالا فریم ورک Vue.js که شبیه معجزه عمل میکنه و در واقع خودش یازده هزار خط جاوااسکریپت هست، از سال ۲۰۱۴ پیداش شده و یادگیریش از همزادهای دیگه اش مثل Angular یا React بسیار سریع تره.

تنها کتاب فارسی اون رو به صورت پروژه محور بخونین و از توانایی هایی که بعدش به دست میارین لذت ببرین! و البته قبلش لازمه جزوه ی جاوااسکریپت رو هم نگاهی انداخته باشین.

#javascript #vue #spa #book

نمونه اپ تک صفحه یا SPA

در اینجا یک نمونه ی جالب از اپ تحت وب تک صفحه یا سینگل پیج رو ملاحظه می کنید. در واقع همون طور که بعد از اجرا خواهید دید با اشاره روی لینک ها صفحه رفرش نشده و فقط محتوا عوض می شود! اگر دنبال یادگیری سریع و ارزان این تکنیک هستین کافیست کتاب پروژه محور Vue.js رو که مثالهای فارسی داره نگاهی بندازین.

#vue #javascript #spa

تکنیک ساخت دوزبانه
با همین دو صفحه و چند خط به راحتی یک پیج دو زبانه نوشتم. همون جور که در خط سوم فایل سمت چپ معلومه، فریمورک Vue.js رو که کمتر از صد کیلوبایت هست باید بقلش دانلود و کپی کنید. با کلیک روی لینک زبان در جا پیج ها ترجمه میشن و حتا راست چین یا چپ چین هم میشن. کافیه بدون دونستن Vue فقط از روش ساختی که اینجا رفتیم تبعیت کنید و به کلمات اضافه یا کم کنید و گرافیک صفحه رو پیشرفته تر کنید.
اگه از ترکیب کدهای تک صفحه SPA و این کد هم استفاده کنید عالی میشه و دیگه با تغییر صفحات رفرش کل پیج انجام نمیشه و سایت به زبانی که تغییر دادین هم باقی میمونه.

#javascript #vue #spa

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

اهمیت یک سری کد آماده زمانی روشن میشه که بخواهیم به صورت تیمی کاری رو پیش ببریم و سرعت و دقت در تحویل پروژه مد نظر باشه.
معلومه کدهایی که هرکس با سلیقه ی شخصیش نوشته برای بقیه به راحتی قابل فهم نیست ولی توافق بر سر یک استاندارد همیشه خطاها رو کم کرده و پشتیبانی و توسعه های بعدی رو خیلی بسیار روان تر میکنه.
در این ویدیو یک توضیح ساده در مورد کتابخانه ی کد و نوع پیشرفته اش فریم ورک رو خواهید دید.

#vue #javascript #framework

برنامه ی To-Do List با Vue.js

داریم میریم هایپراستار یا حتا سوپرمارکت سر کوچه. کمترین ابزاری که برای یه خرید خوب داشتیم، یه قلم و کاغذ بود که قبلش لیست اقلام رو نوشته بودیم و با برداشتن و گذاشتن توی سبد روی هر کدوم یه خط میکشیدیم.

حالا با همین چند خط میشه گوشی رو به یه وسیله ی کارآمدتر از اون کاغذ تبدیل کرد. هر چند تا که بخواهیم اقلام خرید رو اضافه می کنیم و با برداشتن و گذاشتن توی سبد دکمه حذف مقابلش رو میزنیم.

غیر از این دو تا فایل همون طور که در معرفی ویو قبل از این گفتم، فایل min.vue.js رو هم باید دانلود کنید بذارید بقل پروژه تون.
با ایده پردازی بیشتر و مطالعه ی کتاب آموزش سریع Vue می تونین بخش ویرایش رو هم به این اپ اضافه کنید.

#javascript #vue #spa #webdesign

چهار فرآیند اصلی کار با دیتا CRUD

اول اینکه اگر این ویدیو رو با ویدیوی قبلی در مورد جاوااسکریپت مقایسه کنیم، متوجه ی اهمیت فریمورک Vue خواهیم شد. بعد لازمه برای تکمیل فرآیندی که در این فیلم شرح داده میشه کتاب آموزش سریع ویو رو یه نگاه بندازین.
همینطور ویرایشگر کدی که توی این فیلم باهاش کار میکنم یعنی icode-go رو با تمام پلاگین ها برای دانلود براتون گذاشته بودم.

#javascript #vue #code #crud