Full stack Development

סקירת הטכנולוגיות והכלים המקצועיים העומדים בבסיס עבודתו של מפתח צד הלקוח: הדפדפן, פרוטוקול HTTP, התפקידים של HTML, CSS ו-JavaScript, סטנדרטים של קוד וכלי פיתוח כמו Sublime Text, WebStorm ו-Chrome DevTools. בנוסף, נלמד על תהליך העבודה בצוות (עם מפתחי צד שרת, מעצבים, מאפיינים), נציג מתודולוגיות פיתוח מתקדמות ואת תהליך הפיתוח בכללותו, החל מ-Rapid prototyping ועד Deployment.

HTML היא שפה פשוטה אך מלאת יכולות ומורכבות שכל מפתח Front-End חייב להכיר. נלמד לייצר מבנים של Web pages וWeb applications – סמנטיקה נכונה ו-Markup patterns למקסימום נגישות (Accessibility), קריאות של מנועי חיפוש (SEO) ומפתחים אחרים, ותחזוקה של קוד. בנוסף, נסקור ארכיטקטורה של עמוד אינטרנט אופטימלי מבחינת המבנה וה-Best-practices שכדאי להשתמש בהם, בהתבסס על HTML5 Boilerplate – שלד ה-HTML הפופולרי והאיכותי.

CSS היא השפה שמשתמשת אותנו לעיצוב ממשק המשתמש. כל מקצוען בתחום יעיד ש CSS takes a few hours to learn but years to master בCSS טמונה מורכבות עדינה שאינה מורגשת עד שלא נתקלים בה וצוברים בה ניסיון משמעותי. מפתחים ומדריכים מנוסים ילמדו אתכם כיצד ליצור סוגים שונים של Layout, לתת Styling לאלמנטים, לכתוב קוד מודולרי ויעיל, טכניקות שונות לפתור בעיות נפוצות ושימוש ביכולות כמו: Web fonts Transforms, Transitions, Gradients, Animations ועוד. נושאים נוספים בשיעור Colors and units, Box model, Floats and position, Overflow Specificity, Advanced selectors, Flexbox & CSS-Grid. נלמד ונתרגל מגוון רחב של כלים לכתיבה נכונה ומודולרית שנותנת מענה לכל סוגי הפלטפורמות שקיימות היום בשוק (מובייל, מחשבים, התקני קצה וכו).

הצורך להתמודד עם כמות הולכת וגדלה של מסכים, רזולוציות ויכולות בזרם בלתי פוסק של מכשירים, הוליד אסטרטגיה חדשה להתמודד עם הבעיה – Responsive Web Design. בעיצוב הרספונסיבי, "עיצוב מגיב" בעברית, אנחנו מגדירים את העיצוב (ופעמים רבות גם התנהגות) לפי נקודות גמישות ונקודות "שבירה". האתר מגיב למצב החדש הדורש התייחסות שונה ומתאים עצמו למכשיר בו הוא מוצג. כשבאים לפתח אתר רספונסיבי, יש דברים רבים שצריך לקחת בחשבון, כמו ביצועים, זיהוי צרכים, טיפול בתמונות, ארכיטקטורה נכונה של קוד וכו'. זו האסטרטגיה שעל פי רוב מומלצת היום לפיתוח מרבית האתרים. עיצוב רספונסיבי הוא מהנושאים הבוערים, הרחבים והמעניינים ביותר על סדר היום של פיתוח ה-Front-end בעולם. בקורס נלמד אותו לעומק, כולל ניואנסים, טקטיקות ומתודולוגיות פיתוח חדשות. נושאים מרכזיים: Flexible type, layout and media, Axes of Responsive design, Mobile viewport, Responsive images, Responsive patterns, JavaScript media queries, Tools and libraries

חוק חדש מחייב את כל אתרי האינטרנט של חברות וארגונים להנגיש עצמם לבעלי מוגבלויות. במהלך השיעור נסקור ונלמד את משמעויות החוק החדש ומה זה אומר להנגיש היום אתר או אפליקציה לבעלי מוגבלויות. בשיעור נתרגל ונראה שהמאמץ הדרוש ברוב המקרים הוא מועט ומשתלב בצורה הרמונית עם מתודולוגיות פיתוח אחרות כמו Progressive Enhancement ואפילו Responsive Design. נגלה שהתמורה עבור כלל המשתמשים (לא רק בעלי מוגבלויות) ואף למפתחי האתר היא רבה במידה עד כדי כך שהחוק עצמו חדל מלשמש מוטיבציה בלעדית להנגשה.

נושאים מרכזיים: Web accessibility guidelines, Forms, Tables, Images, Navigation, Sectioning and Outlining, Interaction, JavaScript and Ajax

JavaScript היא ה"אנגלית" של האינטרנט. אחת משפות התכנות הפופולריות ביותר בעולם וללא ספק השפה שצוברת תאוצה הכי מהר. בתור שפת תכנות, ג'אווה סקריפט היא רבת-עצמה ומגוונת ביותר, וכוללת פרדיגמות שונות החיות בהרמוניה (יחסית): Functional programming, Prototypal Inheritance, Object oriented programming ועוד. בקורס נלמד את המבנים הבסיסיים והמתקדמים של השפה על מנת שנוכל לפתח ממשקים חכמים ודינמיים, בעלי לוגיקה ויכולות הצגת ועדכון נתונים ותקשורת עם השרת. נושאים מרכזיים Arrays, Objects, Functions and Closures, Built-in objects, DOM API, Ajax.

על מנת לבנות Single Page Application באמצעות קוד יעיל וקל לתחזוקה, לא מספיק להכיר את השפה. כדי להשיג את התוצאות הרצויות נלמד לעומק גם את המבנה של ג'אווה סקריפט מאחורי הקלעים, וגם דרכים ליצור מבנים נכונים בקוד ולהבין איך הדפדפן עובד מאחורי הקלעים ולרכוש הבנה מעמיקה יותר איך הדברים עובדים בצורה מיטבית. נושאים מרכזיים: Classes and Prototypes, JavaScript design patterns, Promises, Best practices, Language and Memory structures

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

נושאים מרכזיים: Modularity, Dependency management, Global scope, Namespacing, RequireJS, CommonJS, ES6 Modules.

הצורך להפריד את שכבת התצוגה (View-HTML) מהנתונים (Model-JS) הוליד את עולם ה- JavaScript HTML Templates בשיעורים נלמד ונתרגל את העיקרון, נבין כיצד לחשוב ולתכנן נכון את התכנים שלנו שיתאימו לכל אינסוף סוגי המכשירים שקיימים היום בשוק, איך לייצר מודולים ויזואלים שניתן למחזר ולהשתמש בהם בצורה נגישה ויעילה ועוד.
בנוסף נראה ונכיר ספריות וכלים שונים לכתיבה נכונה, מהירה וטובה שתתמוך גם במכשירים עתידיים ובמכשירי קצה מכל סוג שהוא.
נסקור את היתרונות והחסרונות של כל אחד מהמנגנונים על מנת ליצור תהליך חשיבה נכון בבחירת Stack טכנולוגי.

נושאים מרכזיים Embedded, Logic-less, Mustache, Handlebars, Dust, JsRender.

היום מפתח טוב יכול לכתוב מערכת שלמה המשלבת ממשקים אפליקציה וקוד שרת והכל תוך שימוש אך ורק בשפת JS. על פי רוב מפתחי ה-Front-End לא עובדים בוואקום אלא בשיתוף פעולה עם אנשי מקצוע נוספים כמו מנהלים, מאפיינים, מעצבים, ומפתחי צד-שרת. אלה האחרונים הם למעשה העמיתים שלנו לעבודה ומשלימים אותה על מנת לייצר מוצר שלם, בעיקר כשמעורב בו ניהול משתמשים או נתונים.

בכדי להוציא לשוק אנשי מקצוע עם ראיה רחבה וכישורי עבודה בצוות החלטנו שלא ניתן לפסוח על לימוד ותרגול מינימליים של הנושא. בבחירת הטכנולוגיה בחרנו ב-Node.js, שהיא למעשה JavaScript בצד השרת. זהו אחד הכיוונים ה"חמים" והמעניינים היום בתחום, המאפשר למפתח אחד ליצור מערכת שלמה בעזרת אותו Eco-system טכנולוגי (JavaScript).

נושאים מרכזיים:
Setting-up a Node server, Modules, Requests, responses, callbacks and events, Streams, Files, Working with data, Express framework, Working with data using MongoDB

אחד הכלים החזקים והנפוצים ביותר בחגורת הכלים של מפתח הצד הקדמי היא ספרית jQuery. הספרייה היא סטנדרט בעולם הפיתוח ומשתמשים בה המון, בעיקר כדי להקל בכתיבת פעולות DOM ו-Ajax, הן מבחינת Syntax ו-Code terseness וגם מבחינת Cross browser compatibility. אחד היתרונות של jQuery נעוץ בכמות ההרחבות האינסופית שלו. בקורס נסקור את השימושיים והאיכותיים שבהם ואף נלמד לייצר Plugins משלנו על מנת ליצור ארגז כלים שימושי ומודולרי. נלמד דברים בסיסיים ומתקדמים ונראה כיצד לנצל את הספרייה לכתיבת קוד מהיר ויעיל יותר. נושאים מרכזיים: jQuery API, DOM, Events, Ajax, Forms, Animation.

אחד השינויים המשפיעים ביותר על תהליך העבודה של מפתחי Front-end . הוא הופעתם של CSS Preprocessors. SASS הוא המוביל מביניהם. כלים אלה יצרו מהפכה באיך שאנחנו כותבים היום CSS ונתנו לנו את היכולת להשתמש באלמנטים הקיימים בשפות תכנות שונות כגון משתנים, פונקציות, לולאות, מודולים ובאופן כללי יכולת לממש בצורה מיטבית את עקרונות ה-Object Oriented CSS. נלמד ונתרגל את הכלים הללו כך שהם יהפכו לטבע שני עבורנו, ויעזור לכם להשתמש בהם בהמשך הקורס ובעתידכם המקצועי. נושאים מרכזיים: Structure, Partials, Nesting, Variables, Mixins, Functions, Loops,, Sprites, Best-practices.

לרשותו של המפתח יש היום שלל כלים שעוזרים להפוך את עבודתו ליעילה יותר, ואת התוצר הסופי לאיכותי ומקצועי יותר. בקורס נראה ונלמד מה הכלים הטובים בתחום ונשלב אותם בהמשך העבודה בצורה חלקה. נושאים מרכזיים: Chrome DevTools, The Command Line Interface, Grunt, gulp, Webpack FED setup, Hot Module Reloading, VS Code, Cloud deployments.

בכל צוות פיתוח משתמשים בשיטה לניהול גרסאות כדי לתעד ולשלוט בשינויים הנעשים בקוד על פני זמן. בעולם ה-Web והקוד הפתוח שתי המערכות הנפוצות לכך הן SVN ו-GIT. נלמד ונתרגל שיטות אלה, תוך התמקדות ב-Git . גיט היא מערכת ניהול גרסאות לא-טריוויאלית ומסובכת יחסית, אך כשמכירים אותה לעומק מתחילים להבין מדוע אחת החברות המובילות בעולם היום היא Github – שירות ענן המספק שירותי Git לרוב פרויקטי ה-Open Source בעולם של ארגונים כמו jQuery, Twitter, Facebook ו-Adobe. נושאים מרכזיים: SVN/Git overview and comparison, Git basics, Branching, Git workflow, Configuration

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

ככל שעולם ה-Front-end מתפתח, מתווספות עוד ועוד יכולות המעלות את הדרישות מהמפתחים.
כך מתגבר הצורך לקחת צעד נוסף קדימה ולהפסיק לראות את הדפדפן כתוכנת Consumer אלא בתור Development platform

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

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

בקורס נתמקד בדפדפני משפחת Webkit הכוללת את Chrome, Safari.

נושאים מרכזיים: High level structure, Main flow, DOM and Render trees, Parsing, Layout, Painting

עד לפני כמה שנים הנושא של לכתוב קוד Front-End מותאם לדפדפנים סבב בעיקר סביב רשימת הבאגים של Internet Explorer  ומעלה. כבר אז החיים לא היו קלים: מפתחים רבים הזיעו, התייאשו וקיללו את הדפדפן הנ"ל, אבל דווקא החיים היום, בעידן של Post-IE, מביאים איתם אתגרים מורכבים לא פחות בכל הנוגע לCross-platform development . קוד HTML5 העובד ללא בעיה בכל פלטפורמה לא הביא לסוף בעיות התאימות, זאת כפועל יוצא של האופן בו הדפדפנים והמכשירים השונים מתפתחים היום.

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

נושאים מרכזיים: The browser landscape, Mobile platforms, Main engines, Internet Explorer today, Cross-browser strategies and tactics, Feature detection, Progressive Enhancement, Polyfilling, Modernizr

אחד האתגרים הגדולים בפיתוח ה-Front-end הוא התמצאות בגיליונות העיצוב השולטים בנראות.
קוד CSS נוטה לצאת משליטה ולהפוך למאסה לא-מודולרית הסותרת את עקרון ה-DRY בפיתוח.

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

נושאים מרכזיים: CSS anti-patterns, OOCSS, SMACSS, Tools

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

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

נושאים מרכזיים: SVG use cases and techniques, Font Icons, CSS3, Issues, Tools

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

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

נושאים מרכזיים: Cross document/origin scripting, History, localStorage, Video/Audio, Geolocation, WebSockets, Device Access

הדרישות מאתר או אפליקציית Web היום הן עצומות: עיצוב מרשים, חוויית משתמש (UX) מצוינת, שמישות (Usability) גבוהה, כמויות רבות של תוכן ונתונים ותמונות ופיצ'רים מתוחכמים ומתקדמים.

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

בקורס נלמד לעומק את המדדים, הכלים וה -Best-practices  טיפים וטריקים מתקדמים שיעזרו לנו להגיע לרמה האופטימלית, כולל Network, Computing ו-Rendering Performance, כדי לספק למשתמשים שלנו מוצרים חלקים ואף לתרום לאיכות הסביבה על-ידי צמצום שימוש במשאבים כמו תעבורה ברשת וזמן סוללה.

נושאים נוספים: History, stats and Response time limits, Chrome DevTools Timeline and other Tools, Avoiding/Finding memory leaks and JavaScript profiling, Script loading and deferring, Browser rendering and Performance anti-patterns

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

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

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

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

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

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

על כן חובה שתכירו את הכוחות הפועלים בתעשיית הדיגיטל בארץ ובפרט בתחום ה-Front-end, בכדי לדעת מהן אפשרויות התעסוקה העומדות לרשותכם, בין אם אלה חברות סטארט-אפ, מוצר, תאגידים ועוד.

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

מקורות המידע והדרכים הכי טובות להיות עם האצבע על הדופק בתחום

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

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

בשיעור האחרון נציג ונתפעל מפרויקטי הסיום של התלמידים. נדבר על המגמות המובילות בעולם ה-Front-End Development עם דגש על מגמות עתידיות.

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