12

تجربتك مع Polymer ورأيك فيه وفي Web Components

سمعت منذ أكثر من سنة عن Polymer ولكن لم أعره اهتماما كبيرا لأني لم أجد نفسي استعمله بعد، كما أنّه بدى معقدا في البداية

مؤخرا بينما كنت أبحث عن عناصر UI لاستخدامها صادفت عناصر Polymer والتي هي مبنية على material design وقد أعجبتني كثيرا، المشكلة أنّه لا يمكنك استخدامها خارج Polymer

لذا بدأت أفكر في 3 حلول، إما محاولة تقليدها لتعمل بشكل طبيعي وتوفر نفس الخواص الأصلية ولكن هذا سيتطلب بعض الوقت وقد لا يعطي نفس النتائج ولكن لاضرر لدي في القيام بذلك

الحل الثاني كان محاولة التعديل على الملفات وتعديلها بحيث تعمل لوحدها، أيّ UI فحسب بدون خواص Polymer هذا طبعا سيأخذ وقتا كبيرا جدا

الحل الثالث، وهو في الأغلب ما يقوله الجميع (لماذا لا تستخدم polymer كاملة فحسب) المشكلة هي في حجمها الكبير الذي يصل إلى 180kb (متضمنة polyfill للمتصفحات، وبحجم 60kb مضغوظة [Gzipped])

قد أستعين بهذا الحل في الأغلب، ولكن لا أريد أن أشعر كأني مخدوع وأرسل للمستخدم 60kb وأنا لا أستفيد سوى من جزء بسيط منها، لذا أفكر في استخدام كامل مميزاتها، لذا أحاول أن أفكر كيف سأقوم بهذا بالتحديد

أطرح هذا الموضوع لأسمع عن آرائك بشأن هذه المكتبة، وفي حال استخدمتموها من قبل، وكيف كانت التجربة، وهل أفادتكم حقا

وأيضا رأيك بشكل عام في Web components وماهي الأشكال التي ينفع استخدامها فيها، والأشكال التي يجدر بك فقط نسخ الكود فحسب

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

على صعيد آخر يبدو أني وجدت مكتبة تملك ما أبحث عنه تماما، ربما مع بعض التعديل البسيط أولا

المكتبة تستخدم تصميم material design وتستخدم react كأساس لها

العناصر في المكتبة كما يبدو هم web components تماما مثل polymer ولكن على مستوى أقل (بدون HTML imports و DOM shadow) لذا حجمها أقل

وجدت هذا الموقع بالصدفة :)

هههههه تتحدث عن 180 كيلو ..

في بعض تطبيقاتي تجاوزت الواجهة 5 ميجا .. لكن غالباً سيتم الدخول الى التطبيق من خلال شبكة محلية, وليس الانترنت.

حل ربما يصلح لحالتك

اكيد جافاوي ...

ههههه اصبت

والتي هي مبنية على material design وقد أعجبتني كثيرا، المشكلة أنّه لا يمكنك استخدامها خارج Polymer

كما أشار العديد من المعلقين، العديد من المنصات والمكتبات البرمجية لديها مكتبة تطبق تصميم الأدوات على تصنيفات التصميم المادي (Material Design). منها reactjs أو حتى AngularJS، هذا رابط للتصميم المادي بالآنجيولار.

هنالك أيضا مكتبة غير رسمية لBootstrap

بالنسبة ل Polymer. استخدمته في مشاريع نموذجية (Prototypes) داخل الشركة لبناء تطبيق سريع بتصميم رائع بسهولة وبدعم التصميم المادي. أعجبني استخدامه كثيراً، بعض السلبيات مثل ما ذكرت حجم المكتبة بشكل عام. أعتقد عندما تصبح المتصفحات تدعم الخصاص المبدئية مثل الShadow Dom وال Scoped CSS وغيرها ستقل. لم أستخدم المشروع لبناء مشروع خارجي أو مشروع نهائي.

نعم البارحة في الليلة ذكر لي صديقي مكتبة angularJS التي بينتها أنت، وهي رسمية كما يبدو

أعتقد أني سأستخدمها الآن هي و angularJS، لكن واجهت مشكلة وهي الأداء، الanimation فيها كان بطيئا في بعض الأحيان، خصوصا مع تأثير ripple (أو ink) وخصوصا في tabs و slides لكن ربما كانت المشكلة من حاسوبي فقد كان بطيئا البارحة، لذا سأجربها مجددا

أحببت Material Design وأحببت تطبيقها في Polymer، ولأني لا أحبذ استعمال مكتبات خارجية أيضًا (خصوصًا بهذا الحجم)، بدأت منذ فترة بتطبيق بعض التأثيرات التي أريدها في مشاريعي الصغيرة (في الغالب سأقوم بنشرها بعد اكتمالها). لذا يبدو أني قمت بتطبيق الحل الأول من الحلول التي ذكرتها.

بدأت بـripple effect، وتجربتي حتى الآن أن العملية ليست بالبسيطة في حالة أردت تعميم التأثير ليعمل في كل الأحوال (في مشاريع مختلفة). أما في حال كان مخصصًا لمشروع بعينه فهو ليس بتلك الصعوبة، لكنه بالفعل يتطلب بعض الوقت (وكل هذا منطقي).

هنا صورة لما توصلت إليه حتى الآن:


أما بالنسبة لـweb components، فلم تتح لي الفرصة بعد للتعمق فيها.

تستطيع اختصار جهدك بشأن ripple effect والتركيز على التأثيرات الأخرى حيث أنّه تم تطبيقه من قبل ببعض jquery

شكرًا لك على الرابط. في الحقيقة هناك أسباب تدفعني لكتابتها بنفسي:

  • للأسف جميع التطبيقات (التي مررت بها) لا تقوم بتطبيق التأثير بشكل صحيح (ربما لهذا أحب Polymer). من ذلك: النقر مرتين في المثال الذي ذكرته سيقوم بعمل reset للتأثير ليبدأ من جديد، وهو أمر مزعج جدًا. بالإضافة لذلك، لا يقوم بتطبيق التأثير الأولي (من المفترض أن يبدأ التأثير عند mouse-down وليس up)، وكل هذا يقتل انطباع الـ«حياة» (إن صحت الترجمة) التي هي أحد ما يميز هذه اللغة.

  • لا أحب استعمال jQuery أيضًا في مشاريعي (لم أرَ -حتى الآن- أني أحتاج إليها بالنسبة لحجمها)، وأغلب التطبيقات تستخدمها بالفعل.

  • أعترف أنني أحيانًا كثيرة أقوم بهذه التجارب للفضول الشخصي والتجربة، لذا هناك أسباب أخرى غير الحجم أو عدم وجود بديل.

نحن في القرن الواحد و العشرين

ماذا تعني 60kb أو 180kb ؟

الاحظ في معظم مشاركاتك الانتباه لهذه التفاصيل

لكن الا تعتقد ان التدقيق في مثل هذه الأمور يكون على حساب الصورة الكاملة ؟

نعم أدرك هذا، ولكنك تنظر للأمر من جهة واحدة، حاسوب مكتبي وسرعة انترنت DSL

لديك سرعة انترنت 3g حيث التحميل بطيء

لديك معظم الهواتف الذكية تملك قدرات محدودة، ملف جافاسكربت بحجم 180 كيلوبايت سيشلها تماما، بل إنّه قادر على تعطيل المتصفح أيضا وجعله بطيئا في كل بعض الأحيان

أحيانا نعم، يكون على حساب الصورة الكاملة. في معظم الأحيان أركز على الجمهور وأرى هل فعلا سيتحمل الجمهور بعض الانتظار لأول مرة من أجل استخدام الموقع؟

في بعض الأحيان الإجابة هي لا، في مواقع مثل مدونات، أو شيء سلعته الأساسية هي الزوار

في بعض الأحيان الإجابة هي نعم، في مواقع مركزة مثل تطبيق ويب، متجر إلكتروني، أو منصة عمل

أيضا أستخدم CDN وتقنيات الضغط حتى أجعل الموقع خفيفا قدر الامكان للمستخدم، وأحاول أن لا أحد نفسي إطلاقا لذا تجدني أبحث عن حلول أخرى تقوم تعطي نفس النتيجة (إذا تطلب مني الأمر عملا إضافيا)

في بعض الأحيان الإجابة هي لا، في مواقع مثل مدونات، أو شيء سلعته الأساسية هي الزوار

في بعض الأحيان الإجابة هي نعم، في مواقع مركزة مثل تطبيق ويب، متجر إلكتروني، أو منصة عمل

انت اجبت على سؤالك.

في حال مشروعك صغير نسبيا او web components بسيطة .. لا حاجة لاستخدام مثل تلك الحلول.

اذا كنت مهتم ب Web components القى نظرة على reactjs

مثال

يستخدم reactjs مع ان التصميم material design

اذا كنت مهتم ب Web components القى نظرة على reactjs

نعم سبق وأشدت على تلك المكتبة في تعليقي في الأسفل، أرى أنها الحل المناسب

في الحقيقة أنا أتفق معه، أرى أن الإنطباع الناتج من سرعة تحميل الموقع له أثر كبير على المستخدم.

وبالإضافة إلى ما ذَكر، لماذا أستخدم 180 كيلوبايت في حين يمكنني أن أستخدم 10% منها (وربما أقل)؟ وخصوصًا إن كان استعمالي لها لن يزيد عن 25% من خصائصها (كالعديد من الأمثلة حاليًا).

لدي سؤال لك اخ نذير يلح الحاحاً , ويبدوا انك الشخص الذي ابحث عنه لاجابه هذا السؤال .

انا الاحظ اغلب مصممي المواقع الان يستخدمون المكاتب الجاهزة من jquery ومكاتبCSS Bootstrap وما الى ذلك من مكاتب توفر وقت وجهد في برمجة وتصميم محتويات الموقع ولكن ربما يستخدم المصمم جزء بسيط من الCSS او jquery لحاجته البسيطة في التصميم .

السؤال هل في كل مرة يفتح الزائر الموقع تتحمل كل هذه الملفات او انه يتم تحميل جزء منها فقط حسب استخدام المصمم .

اذا كان كامل ملف CSS لل Bootstrap والخطوط المصاحبة له تحمل عند فتح الموقع فأنا ارى فشل كبير جدا من المصمم والمبرمج للموقع اليس هذا صحيح

سبق وتكلمت عن مشكلة الحجوم

ونعم، يتم تحميل كامل المكتبة، عادة تكون مضغوطة مرتين (minified و gzipped) مما يقلل من حجمها بشكل جيد (يصل حجم jquery إلى 34kb مثلا)

يتم تحميل هذه المكتبات لأول مرة فحسب، ثم يتم حفظها في الكاش الخاص بالمتصفح، المرة القادمة لن يستلزم على الزائر أن يحملها مجددا

بالطبع لا مشكلة في تحميل jquery قليلة الحجم وبعض المكتبات الخفيفة، المشكلة تظهر عندها تدرج أكثر من مكتبة وأكثر من خط مما يجعل حجم الملفات كبيرا جدا

موقع bootstrap يقدم خدمة للتقليل من حجم المكتبة عبر الحصول على ماهو مفيد، ولكن الناس نادرا ما تستخدمها، ولا مشكلة في هذا فالأغلب يستخدم bootstrap لعمل نموذج أولي فحسب

لذا لا أرى فشلا كبيرا حقا إلا في حالات معينة

بارك الله فيك مواضيعك اكثر من رائعة وانت من يستحق اسم مصمم مواقع بجد وليس كل من هب ودب ويسمي نفسه مصمم مواقع وهو يستعمل كل شيء جاهز ولا يفهم معنى حساب كل جزء بالملي .

من نظري الشخصي يجب لا يكون حجم اي صفحة اكثر من 100 KB , انا حاليا اقوم بتصميم موقع يتم تحميل ملفات CSS وال Jquery في اول مرة فقط ثم يفتح باقي الصفحات داخل IFrame ومن ثم ترث الصفحات ملفات CSS و ال Jquery من الصفحة Parent مما يجعل التصفح اسرع بكثير بنظري بالاضافة .

لدي طلب اخير اخ نذير اتمنى ان ترش طرق الضغط للملفات (minified و gzipped) هل يوجد طرق معينة للضغط ام الاستضافة هي من يقوم بهذا الامر وشكراً جزيل الشكر لك .

شكرا لك أخي.

بالنسبة لضغط الملفات، فأول واحدة وهي minified تستطيع أن تقوم بها بنفسك عبر تمرير الملف سكربت لضغط الملفات أو أي موقع أونلاين يقوم بهذا [1] أما الطريقة الثانية فتتم عبر المخدم. عادة يكون الأمر مفعلا افتراضيا في المخدمات وإن لم يكن فتستطيع تفعليه لوحدك عبر ملف .htaccess (في مخدم أباتشي مثلا) هنا يوجد شرح كامل للخاصية وطريقة لإضافتها في كل من أباتشي و nginx حتى تغطي كامل الاحتمالات [2]

[1]

[2]