مقدمة لأطر الويب
خريطة الطريق
- ناقش الأطر ما هي ولماذا تساعدنا في كتابة التطبيقات
- تعلم التمييز بين الأطر الأمامية والخلفية وأطر CSS
- تعرف على الأطر التي تحظى بشعبية في الوقت الحالي ولماذا
- تعرف على كيفية اتخاذ القرارات بشأن الأطر التي يجب استخدامها للمشاريع
ما نوع التطبيق الذي ستنشئه؟
إذا كنت غير متأكد ، هنا وهنا لديك بعض الأفكار الرائعة! أيضًا ، اقض بعض الوقت في التفكير في ما سيجعل تطبيقك أكثر نجاحًا. ناقش أفكارك مع الناس على طاولتك.
أوجه تشابه تطبيق الويب
انظر إلى Facebook و Twitter و LinkedIn و Github وقم بإدراج بعض أوجه التشابه التي تراها مع الأشخاص القريبين منك.
ما هي الأطر
إذا نظرنا إلى اثنين من تطبيقات الويب المختلفة ، يمكننا أن نرى أن هناك مساحة كبيرة من الميزات المكررة. جميع تلك التي نظرنا إليها أعلاه لها مصادقة للمستخدم ، ووجهات النظر التي تقدمها ، وهي تتصل بقواعد البيانات ، ولديهم ملفات تعريف يمكنك إلقاء نظرة عليها ، ولديهم جميعًا خلاصات من الأجزاء من المعلومات وما إلى ذلك. إذا أردت ذلك ، يمكنني كتابة كل هذا المنطق بنفسي في كل مرة أرغب في بناء تطبيق جديد ؛ ومع ذلك ، هناك أيضًا الكثير من الأدوات المتاحة التي يمكنها القيام بذلك لنا بدلاً من ذلك. بالإضافة إلى ذلك ، في كثير من الوقت الذي نقوم فيه ببناء تطبيقات نريد تنسيق الكود لدينا بطرق معينة تساعدنا على أن تكون فعالة ومساعدة المطورين الآخرين على فهم الكود لدينا بسهولة أكبر. تساعدنا أطر الويب على تحقيق بنية لتطبيقاتنا ، وهي تمنحنا ميزات إضافية يمكننا إضافتها إلى تطبيقاتنا دون الكثير من العمل الإضافي. تمنحنا الأطر مكانًا للبدء بتطبيقاتنا حتى نتمكن من التركيز على ميزات تطبيقاتنا بدلاً من تفاصيل التكوين.
Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.
To summarize: there’s no need to reinvent the wheel.
من أوواردز.
الخلفية مقابل الواجهة الأمامية
الواجهة الأمامية لتطبيق الويب هي الجزء الذي تراه وتتفاعل معه. وهو يتألف من تصميم الويب وتفاعل الموقع. من حيث لغات البرمجة ، يتكون هذا دائمًا من CSS و HTML و JavaScript من الصفحة.
يتكون الواجهة الخلفية من الخادم ، وقاعدة البيانات ، والرمز الذي يتفاعل معهم. يتكون هذا أيضًا من الكود الذي يعطي بيانات ديناميكية إلى الواجهة الأمامية للموقع. يمكن التعامل مع هذا في معظم langues البرمجة. تلك التي سنناقشها في المقام الأول اليوم هي Python و Ruby و Node JavaScript ولكن هناك عدد لا يحصى من الآخرين.
أطر واجهة المستخدم
تساعد أطراف واجهة المستخدم في إنشاء تطبيقات الويب ذات الأطاقة المهنية والمهنية. يتضمن معظمهم نوعًا من نظام الشبكة بحيث يمكنك أن يكون لديك عناصر محاذاة بشكل جيد ، ولديها أنظمة ألوان بحيث يتم التعامل معها من أجلك ، وتصفح مكونات HTML الخاصة بك بحيث تبدو نظيفة ومهنية.
بعض هذه تشمل:
- bootstrap
- معروف جدا وبنيت من قبل تويتر
- سهل التعلم وتبدو احترافية
- يمكن أن يكون من السهل اكتشاف "مواقع bootstrap"
- قد يكون من الصعب تخصيص المكونات
- تتحقق
- نظيفة المظهر
- أكثر قليلاً من "المرح" من bootstrap
- الكثير من خيارات التصميم والألوان
- يتبع دليل نمط المواد من Google
- مؤسسة
- الكثير من الأمثلة
- المظهر المهني
- واجهة المستخدم الدلالية
- الكثير بنيت في
- بنيت في مواضيع بحيث قابلة للتخصيص
- جروم
- يركز بشكل كبير على إمكانية الوصول
- تبدو نظيفة حقا
- لا تستخدم مثل بعض الآخرين
- مصنوعة من أجل React JS (إطار آخر سننظر إليه لاحقًا)
اختيار إطار واجهة المستخدم
إن اختيار إطار واجهة المستخدم في الغالب يعود إلى التفضيل الشخصي في المظهر وأهداف الموقع. قد تجذب الأنماط المختلفة الصناعات المختلفة أو قد تنقل رسالة مختلفة.
اقض بضع دقائق في مناقشة مظاهر مختلفة واختر أيها الأفضل لتطبيق العينة.
أطر الواجهة الأمامية
- Vue
- من السهل التعلم
- سريع جدا
- يتم تعبئة جميع الأدوات المرتبطة بها بشكل جيد
- يأخذ أجزاء من الزاوي وتفاعلها وتحسينها
- أقل اعتمادًا على نطاق واسع من البعض الآخر
- مرن - يمكنك استخدامه بطرق متعددة
- AngularJs
- بنيت بواسطة Google
- مدعوم جيدا
- عدد كبير من الميزات
- يحسن قابلية التوسع في التطبيق
- من الصعب تصحيح
- منحنى التعلم الكبير
- Angular 2+
- بنيت بواسطة Google
- مدعوم جيدا
- يشجع إعادة الاستخدام
- يحسن قابلية التوسع في التطبيق
- منحنى التعلم الكبير
- رد فعل
- بنيت من قبل الفيسبوك
- حزم رمز الواجهة الأمامية في مكونات
- ينظم التعليمات البرمجية والبيانات لجعل التعليمات البرمجية أكثر قابلية لإعادة الاستخدام
- منحنى التعلم الكبير
- لديها بعض الجدل مع شروط الملكية الفكرية
- ember
- يعطي كمية كبيرة من الوظائف خارج الصندوق
- رأي (عليك استخدام تنسيقه)
- منحنى التعلم حاد
اختيار إطار الواجهة الأمامية
اذهب من خلال بعض هذه ونظر إلى الكود. أيضا البحث عن إيجابيات وسلبيات كل. فكر في أي من الأفضل للتعلم أو الاندماج في فكرة التطبيق الخاصة بك.
الأطر الخلفية
- الربيع MVC
- جافا (لغة أكثر صعوبة للتعلم)
- سريع جدا
- أقل رأي
- Django
- بيثون (لغة أسهل للتعلم)
- وسيط سعيد بين كونك رأيًا للغاية وأقل تنظيماً
- يمنحك الكثير من الوظائف خارج المربع (مثل مصادقة المستخدم ، واتصالات قاعدة البيانات ، وعرض العرض)
- يمكن أن يكون من الصعب دمج واجهة واجبة فاخرة.
- معالجة بيانات بيثون مذهلة
- قارورة
- بيثون (لغة أسهل للتعلم)
- أقل رأيًا وأكثر تخصيصًا من Django
- يمنحك أقل من الصندوق (عليك بناء المزيد)
- روبي على القضبان
- روبي (لغة أسهل للتعلم)
- رأي جدا
- لديه أدوات رائعة مثل السقالات حتى تتمكن من بناء الأشياء بسرعة
- يمنحك الكثير من الوظائف خارج المربع (مثل مصادقة المستخدم ، واتصالات قاعدة البيانات ، وعرض العرض)
- يساعد خط أنابيب الأصول في تطوير الواجهة الأمامية
- يستغرق Ruby وقتًا أطول لتشغيل البرامج من بعض لغات البرمجة الأخرى
- نيزك
- JavaScript (لغة أسهل للتعلم)
- يمنحك الكثير من الوظائف خارج المربع (مثل مصادقة المستخدم ، واتصالات قاعدة البيانات ، وعرض العرض)
- يتكامل بشكل جيد مع الجبهة الحديثة
- يعبر
- JavaScript (لغة أسهل للتعلم)
- قابل للتخصيص جدا
- خفيفة الوزن جدا
- ميزات أقل بنيت
- العقدة سريعة جدا
اختيار إطار عمل خلفي
اذهب من خلال بعض هذه ونظر إلى الكود. أيضا البحث عن إيجابيات وسلبيات كل. فكر في أي من الأفضل للتعلم أو الاندماج في فكرة التطبيق الخاصة بك.
المزيد من الموارد!
- Django الفتيات التعليمي
- كود أكاديمية
- TODODVC
- CodeNewbie Podcast
- Women Who Code DC
- ما مدى سرعة لغات البرمجة المختلفة؟
ابق على اتصال!
- aspittel.github.io
- aspittel على Twitter
- Aspittel على جيثب
- علي سبتيل على LinkedIn