רפרוף למפתחי אתרים חזיתיים

התחלתי כמפתח אתרים חזיתי ולאחר מכן הפכתי ל- לְהִתְפַּרְפֵּר מפתח. אני חושב שהיו כמה מושגים שעזרו לי לאמץ את פלוטר בצורה קלה יותר. היו גם כמה מושגים חדשים שהיו שונים.

במאמר זה, אני רוצה לחלוק את החוויה שלי ולהעניק השראה לכל מי שמרגיש משותק בבחירת מערכת אקולוגית אחת על פני האחרת על ידי הצגת המושגים מעבר וכל מושג חדש ניתן ללמידה.

מושגים שהועברו

חלק זה מציג מקומות שבהם פיתוח אינטרנט חזיתי ו-Flutter דומים. זה מסביר כישורים שכבר יש לך שהם יתרון עבורך אם אתה מתחיל את Flutter.

1. הטמעת ממשקי משתמש (UI)

כדי ליישם ממשק משתמש נתון ברשת חזיתית, אתה מרכיב רכיבי HTML ומעצב אותם עם CSS. כדי ליישם ממשק משתמש ב-Flutter, אתה יוצר יישומונים ולעצב אותם עם נכסים.

כמו CSS, ה Color שיעור ב-Dart עובד עם "rgba" ו-"hex". כמו CSS, Flutter משתמש בפיקסלים עבור יחידות שטח וגודל.

ב-Flutter, יש לנו מחלקות Dart ו-enums עבור כמעט כל מאפייני ה-CSS והערכים שלהם. לדוגמה:

גם לפלטר יש Column ו Row ווידג'טים. אלה הם המקבילה לפלאטר display: flex ב-CSS. כדי להגדיר justify-content ו align-items סגנונות, אתה משתמש MainAxisAlignment ו CrossAxisAlignment נכסים. כדי להתאים את flex-grow סגנון, לעטוף את הווידג'טים של הילדים המושפעים של Column/Row, ב- Expanded or Flexible.

עבור ממשקי המשתמש המתקדמים, ל-Flutter יש את CustomPaint מחלקה - זה לפלטר מה Canvas API זה לפיתוח אתרים. CustomPaint נותן לך צייר לצייר כל ממשק משתמש כרצונך. בדרך כלל תשתמש CustomPaint כשאתה רוצה משהו שהוא באמת מורכב. גַם, CustomPaint היא הדרך הנכונה כאשר שילוב של ווידג'טים לא עובד.

2. פיתוח עבור ריבוי רזולוציות מסך

אתרים פועלים על דפדפנים ואפליקציות לנייד פועלות על מכשירים. ככזה, בעת פיתוח עבור כל אחת מהפלטפורמות, עליך לזכור את הפלטפורמה. כל פלטפורמה מיישמת את אותן תכונות (מצלמה, מיקום, התראות וכו') בדרכים שונות.

כמפתח אתרים, אתה חושב על היענות האתר שלך. אתה משתמש בשאילתות מדיה כדי לטפל איך האתר שלך נראה במסכים קטנים ורחבים יותר.

במעבר מפיתוח אתרים לנייד ל-Flutter, יש לך את MediaQuery כיתת עוזר. ה MediaQuery class נותן לך את המכשיר הנוכחי orientation (נוף או דיוקן). זה גם נותן לך את נקודת התצוגה הנוכחית size, ה devicePixelRatio, בין שאר פרטי המכשיר. יחד, ערכים אלה נותנים לך תובנות לגבי תצורת המכשיר הנייד. אתה יכול להשתמש בהם כדי לשנות את המראה של האפליקציה לנייד שלך בגדלים שונים של מסך.

3. עבודה עם מאפי באגים, עורכים וכלי שורת פקודה

לדפדפנים שולחניים יש כלים למפתחים. כלים אלו כוללים מפקח, קונסולה, צג רשת וכו'. כלים אלו משפרים את תהליך פיתוח האינטרנט. גם לפלטר יש משלו DevTools. יש לו את מפקח הווידג'טים, מאפר הבאגים, צג הרשת, בין שאר התכונות שלו.

גם תמיכת IDE דומה. Visual Studio Code הוא אחד ה-IDE הפופולריים ביותר לפיתוח אתרים. יש הרבה הרחבות הקשורות לאינטרנט עבור VS Code. גם Flutter תומך בקוד VS. אז בזמן המעבר, אינך צריך לשנות IDE. ישנן הרחבות Dart ו-Flutter עבור VS Code. Flutter עובד היטב גם עם Android Studio. גם Android Studio וגם VS Code תומכים ב-Flutter DevTools. שילובי IDE אלה הופכים את כלי העבודה של Flutter להשלים.

רוב מסגרות ה-JavaScript החזיתיות מגיעות עם שלהם ממשק שורת פקודה (CLI). לדוגמה: CLI זוויתי, צור React App, תצוגת CLIוכו'. Flutter מגיע גם עם בלעדי CLI. Flutter CLI מאפשר לך לבנות, ליצור ולפתח פרויקטים Angular. יש לו פקודות לניתוח ובדיקה של פרויקטי Flutter.

מושגים שהיו חדשים

חלק זה מדבר על מושגים ספציפיים ל-Flutter שהם קלים יותר או לא קיימים בפיתוח אתרים. זה מסביר רעיונות שאתה צריך לזכור כשאתה נכנס ל- Flutter.

כיצד להתמודד עם גלילה

בעת פיתוח עבור האינטרנט, התנהגות הגלילה המוגדרת כברירת מחדל מטופלת על ידי דפדפני אינטרנט. עם זאת, אתה חופשי להתאים אישית את הגלילה עם CSS (באמצעות overflow).

זה לא המקרה בפלוטר. קבוצות ווידג'טים אינן גוללות כברירת מחדל. כאשר אתה חש שקבוצות ווידג'טים עלולות לעלות על גדותיה, עליך להגדיר באופן יזום את הגלילה.

ב-Flutter, אתה מגדיר גלילה באמצעות ווידג'טים מוזרים המאפשרים גלילה. לדוגמה: ListView, SingleChildScrollView, CustomScrollViewוכו'. הווידג'טים הניתנים לגלילה נותנים לך שליטה מצוינת על הגלילה. עם CustomScrollView, אתה יכול להגדיר מנגנוני גלילה מומחים ומורכבים בתוך האפליקציה.

בצד של פלאטר, באמצעות ScrollViews בלתי נמנע. לאנדרואיד ו-iOS יש ScrollView ו UIScrollView לטפל בגלילה. Flutter זקוק לדרך לאחד את חוויית העיבוד והפיתוח על ידי שימוש בה ScrollViewsגם.

זה עשוי לעזור להפסיק לחשוב על זרימת מבנה המסמך ובמקום זאת לשקול את היישום כקנבס פתוח למנגנוני הציור המקוריים של המכשיר.

2. הגדרת סביבת הפיתוח שלך

כדי ליצור את האתר הפשוט ביותר, אתה יכול ליצור קובץ עם א .html תוסף ופתח אותו בדפדפן. רפרוף זה לא כל כך פשוט. כדי להשתמש ב-Flutter, עליך להתקין את ה-Flutter SDK ו הגדירו את Flutter עבור התקן בדיקה. אז אם אתה רוצה לקודד את Flutter עבור אנדרואיד, אתה צריך הגדר את ה-SDK של אנדרואיד. תצטרך גם להגדיר לפחות מכשיר אנדרואיד אחד (אמולטור אנדרואיד או מכשיר פיזי).

זה אותו מקרה עבור מכשירי אפל (iOS ו-macOS). לאחר התקנת Flutter ב-Mac, אתה עדיין צריך להגדיר את Xcode לפני שתמשיך הלאה. תזדקק גם לסימולטור iOS או אייפון לפחות כדי לבדוק את Flutter ב-iOS. Flutter לשולחן העבודה היא גם הגדרה משמעותית. ב-Windows, עליך להגדיר את Windows Development SDK עם Visual Studio (לא VS Code). ב-Linux, תתקין חבילות נוספות.

ללא הגדרה נוספת, Flutter עובד על דפדפנים. כתוצאה מכך, אתה יכול להתעלם מההגדרה הנוספת עבור מכשירי יעד. ברוב המקרים, תשתמש ב-Flutter לפיתוח אפליקציות לנייד. לפיכך, תרצה להגדיר לפחות אנדרואיד או iOS. רפרוף מגיע עם flutter doctor פקודה. פקודה זו מדווחת על מצב הגדרת הפיתוח שלך. כך, אתה יודע על מה לעבוד, בהגדרה, אם צריך.

זה לא אומר שהפיתוח ב-Flutter איטי. Flutter מגיע עם מנוע חזק. ה flutter run הפקודה מאפשרת טעינה חמה למכשיר הבדיקה תוך כדי קידוד. אבל אז תצטרך ללחוץ R ממש לטעון מחדש חם. זו לא בעיה. סיומת VS Code של Flutter מאפשר טעינה אוטומטית חמה מחדש על שינויים בקבצים.

3. אריזה ופריסה

פריסת אתרים זולה וקלה יותר בהשוואה לפריסת אפליקציות מובייל. כאשר אתה פורס אתרים, אתה ניגש אליהם באמצעות שמות דומיין. שמות מתחם אלו מתחדשים בדרך כלל מדי שנה. עם זאת, הם אופציונליים.

כיום, פלטפורמות רבות מציעות אירוח בחינם.

לדוגמה: DigitalOcean נותן לך תת-דומיין בחינם .ondigitalocean.com.

אתה יכול להשתמש בדומיינים אלה אם אתה בונה אתר תיעוד. אתה יכול להשתמש בהם גם כאשר אתה לא מודאג לגבי מיתוג.

בעולם של Flutter עם אפליקציות מובייל, אתה בדרך כלל ברוב המקרים פורס את האפליקציה שלך לשני מקומות.

עליך לרשום חשבון מפתח בכל אחת מהפלטפורמות הללו. רישום חשבון מפתח דורש עמלה או מנוי ואימות זהות.

עבור App Store, עליך להירשם לתוכנית Apple Developer. אתה צריך לשמור מנוי שנתי של $99. עבור Google Play, עליך ליצור א תשלום חד פעמי של 25$ עבור החשבון.

חנויות אלה בודקות כל אפליקציה שנבדקה לפני שהיא עולה לאוויר.

זכור גם שמשתמשים לא צורכים בקלות עדכוני אפליקציות. על המשתמשים לעדכן במפורש אפליקציות מותקנות. זאת בניגוד לאינטרנט שבו כולם פשוט זוכים לראות את הגרסה האחרונה שנפרסה של אתר אינטרנט.

ניהול אפליקציות פרוסות תובעני יותר באופן יחסי מניהול אתרים פרוסים. עם זאת, זה לא אמור להפחיד אותך. אחרי הכל, יש מיליוני אפליקציות פרוסות בשתי החנויות כך שתוכל להוסיף גם את שלך.

מחשבות נוספות על רפרוף

Flutter הוא כלי חוצה פלטפורמות לבניית יישומי שולחן עבודה, נייד או אינטרנט. אפליקציות פלאטר מושלמות לפיקסלים. Flutter מצייר את אותו ממשק משתמש בכל אפליקציה ללא קשר לפלטפורמת היעד. הסיבה לכך היא שכל אפליקציית Flutter מכילה את מנוע Flutter. מנוע זה מעבד את קוד ממשק המשתמש של Flutter. Flutter מספק קנבס לכל מכשיר ומאפשר לך לצייר כרצונך. המנוע מתקשר עם פלטפורמת היעד כדי לטפל באירועים ואינטראקציות.

רפרוף זה יעיל. יש לו רמות ביצועים גבוהות. הסיבה לכך היא שהוא בנוי עם Dart והוא ממנף את התכונות של Dart.

עם היתרונות הרבים הללו, Flutter היא בחירה טובה עבור יישומים רבים. אפליקציות חוצות פלטפורמות חוסכות כסף וזמן במהלך הייצור והתחזוקה. עם זאת, Flutter (ופתרונות חוצי פלטפורמה) עשויים להיות לא בחירה אופטימלית במקרים מסוימים.

אל תשתמש ב-Flutter אם אתה רוצה שמשתמשים ישתמשו בכלי מפתחי פלטפורמה עם האפליקציה שלך. כלים למפתחי פלטפורמה כאן מתכוונים לכלים ספציפיים למכשיר כמו אפשרויות למפתחי אנדרואיד. זה כולל גם כלים למפתחי דפדפן.

אל תשתמש ב-Flutter לאינטרנט אם אתה מצפה שתוספי דפדפן יתקשרו עם האתר.

כמו כן, אל תשתמש ב-Flutter לאתרים עתירי תוכן.

סיכום

זו הייתה סקירה של מיומנויות העוברות מפיתוח אינטרנט חזיתי לעבודה עם Flutter. דנו גם במושגים של פיתוח אפליקציות שאתה צריך ללמוד כמפתח אינטרנט.

Flutter פשוט יותר עבור מפתחי אתרים מכיוון ששניהם כרוכים ביישום ממשקי משתמש. אם תפעיל את Flutter, תגלה שזה נותן לך חווית מפתח טובה. נסה את פלאטר! השתמש בו כדי לבנות אפליקציות לנייד וכמובן, להציג את מה שאתה בונה.

חופשי על הבר!