Single Page App: מערכת ניתוב

אהרן

ואיך מהירות התגובה שלו בעבודה מאוד אינטנסיווית על הDOM?

פורסם במקור בפורום CODE613 ב29/02/2016 15:03 (+02:00)

אהרן

ואת זה ממולץ לקרוא.
http://www.softwarearchiblog.com/2016/0 ... ogies.html

הוא זרק את node.js ועבר ל-go של גוגל...

פורסם במקור בפורום CODE613 ב29/02/2016 15:24 (+02:00)

ארכיטקט

@אהרן

ואיך מהירות התגובה שלו בעבודה מאוד אינטנסיווית על הDOM?

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

פורסם במקור בפורום CODE613 ב29/02/2016 15:10 (+02:00)

magicode

@רחמים

תכל'ס,
מה יש באנגולר שאין באחרים למשל ב asp mvc?
למה את WPF אפשר ללמוד בשבועיים ואת אנגולר 3 חודשים לפחות ?
אם מתכנת כבר יודע CSS HTML JS וכבר בנה אתרים ב webForms וגם ב asp mvc למה צריך שאנגולר ילמד אותו משהו כל כך שונה שיקח לו ג' חודשים לקלוט את זה?

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

ואל תשכח מה שבעצמך כתבת בחסרונו של האנגולר.

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

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

asp mvc. בכלל לא קשור לאנגולר. ולא דומה לו. ולא יכול להחליף אותו.

וגם אף אחד לא זרק שום דבר. רק מציגים עוד רעינות

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

מקור.
http://todomvc.com/

ואת זה ממולץ לקרוא.
http://www.softwarearchiblog.com/2016/02/choosing-technologies.html

פורסם במקור בפורום CODE613 ב29/02/2016 15:09 (+02:00)

dovid

@avr416

למה אתה לא מחבב את הספר?

האופי שלו מבולבל, כל נושא מקבל נגיעה ונעזב לטובת האחר. הפרקים התקועים של הtesting הם לדעתי תוצאה קלאסית של "ספר לאליטות" ששם אוי ואבוי ללמוד משהו שאי אפשר לבחון אותו בtdd. אין שום סיבה למה לא לשמור את כל הקטע של הטסטינג לאחרי שתכיר את אנגולר, ואפשר לכתוב במהלך הפרקים שאפשר לעיין שם כדי לבדוק את האמור פה.
אבל הכי עצבן אותי זה הדוגמה בעמוד 70 שמייצגת מאוד. למה צריך סרויס? כי... בא תלמד מאה מושגים חדשים (swithc, sub-controller). ותשתמש איתם בדיוק כמו שאנו רוצים (את הבעיה ניתן לפתור בשתי שניות עם קונטרולר, אבל בדרך שיש בדוגמה יש בעיה ולכן..) ואז תבין (?) למה צריך, וברגע שתבין נעבור לפרק הבא במקום להסביר בדיוק מה זה סרויס או להרחיב על הסרויסים הקיימים באנגולר.

פורסם במקור בפורום CODE613 ב08/03/2016 12:51 (+02:00)

avr416

@דוד ל.ט.

ב. הדפדפן אמור שלא להריץ סקריפט שהוכנס בhtml מסיבות אבטחה, כך אני קורא פה: https://developer.mozilla.org/en-US/doc ... /innerHTML שונה ממה שנראה פה http://stackoverflow.com/questions/6109 ... 96#3603496
ג. זה כנראה לא הגיוני להביא תצוגה עם סקריפט. זה תוצאה מהארכיטקטורה הקודמת?.

ראיתי פה בתשובה הראשונה הוא אומר שאם אתה מגדיר בdataType HTML זה אמור לעבוד.. אבל זה עדיין לא עבד לי.
אמנם בתשובה השניה שם (באותו קישור) הוא כותב שאם משתמשים ב innerHTML זה אכן לא עובד, אז שיניתי והשתמשתי בפונקציה של JQuery - append וזה אכן עובד מצויין!
הנה הקוד המעודכן:

self.before_show = function (_url) {       
        $.ajax({
            url: _url,
            dataType:'html',
            success: function (data) {                
                $(container).append(data);
                self.after_show();
            },
            error: function (data) {              
                $(container).append(data);               
            }
        });
    };

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

למה אתה לא מחבב את הספר?

פורסם במקור בפורום CODE613 ב08/03/2016 12:39 (+02:00)

dovid

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

פורסם במקור בפורום CODE613 ב08/03/2016 12:19 (+02:00)

dovid

כמה הערות:
א. אנגולר טוען את הדף רק פעם אחת, אח"כ זה בקאש.
ב. הדפדפן אמור שלא להריץ סקריפט שהוכנס בhtml מסיבות אבטחה, כך אני קורא פה: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML שונה ממה שנראה פה http://stackoverflow.com/questions/610995/cant-append-script-element/3603496#3603496
ג. זה כנראה לא הגיוני להביא תצוגה עם סקריפט. זה תוצאה מהארכיטקטורה הקודמת?.

פורסם במקור בפורום CODE613 ב08/03/2016 12:17 (+02:00)

avr416

כמה עדכונים:
א. התחלתי ללמוד אנגולר קצת יותר רציני ואני בעמוד 55 :lol: !! (דילגתי על הפרק של הUnit test כמו שmat המליץ).
ב. ניסיתי להוסיף לפרוייקט רק את הניתוב של אנגולר, וזה עובד מעולה בטעינה הראשונית של הדף. העניין הוא שהוא טוען רק את הHTML ולא את כל הסקריפטים שמאחוריו, כך שזה לא בדיוק עוזר לי.
ג. ניסיתי לממש מערכת ניתוב בעצמי, הנה הקוד:

window.app = {
    Pages: {},
    pages: {}
};
//בנאי של עמוד
window.app.Pages.Page = function (container, url) {
    
    var self = this;   
    self.el = document.createElement('div');   
    self.url = 'https://localhost:44300'  +url; //כמובן שזהו שרת מקומי וצריך לשנותו כל חד לפום דרגא דיליה..

    self.before_show = function (_url) {
        var result;
        $.ajax({
            url:_url,
            success: function (data) {
                result = data;
                self.el.innerHTML = result;
                container.appendChild(self.el);
                self.after_show();
            },
            error: function (data) {
                result = data;
                self.el.innerHTML = result;
                container.appendChild(self.el);
            }
        });
    };
//אופציה להוסיף קוד שיפעל לאחר טעינת העמוד
    self.after_show = function () { };

    self.show = function () {
        container.innerHTML = '';
        self.before_show(url);       
              
    };
};

//קריאה לעמוד הנכון ע"פ שינוי הHash (#)
function hash_changed() {
    var new_hash = window.location.hash;    
    var page_name = new_hash.substr(1);
    var pages = window.app.pages;

    if (pages[page_name]) {
        pages[page_name].show();
    } else {
        console.log('Page not found: ' + page_name);
    }
}

window.addEventListener('hashchange', hash_changed);

וזה המימוש:

var container = document.querySelector('#pageBody');
var Pages = window.app.Pages;
var pages = window.app.pages;

pages.page1 = new Pages.Page(container, '/DonorsVM/_Index');
pages.page2 = new Pages.Page(container, '/Donation/DonationManagment');
pages.page3 = new Pages.Page(container,'/ManageOrganization/Index');

הבסיס של הקוד בנוי על קוד של ינון פרק ממדריך שלו באתר - ToCode, ואני שיניתי אותו שהוא לא יטען תבנית של HTML אלא יטען קוד מהשרת ע"י AJAX ויציג אותו למשתמש.

הבעיה שלי היא שגם כאן אני חוזר לאותה בעיה שהייתה לי בשימוש עם UI-Router של אנגולר, שזה לא טוען לי את הסקריפטים. כלומר, התשובה שמתקבלת מהשרת אכן מכילה את תגיות הscript אולם משום מה הדפדפן לא טוען אותם..
כשהשתמשתי באנגולר חשבתי שזה בגלל שצריך להגדיר לו בקונטרולר בדיוק מה לעשות - אחרת הוא לא מתייחס לזה.
אולם, זה קורה לי גם כשאני מממש בעצמי, ואין לי מושג למה זה קורה? הרי כשאני טוען את אותו דף עם אותם תגיות ע"י בקשת AJAX פשוטה, הוא כן טוען את הסקריפטים - אז מה השתנה?
תודה רבה לעוזרים..

פורסם במקור בפורום CODE613 ב08/03/2016 11:25 (+02:00)

dovid

<script type="text/javascript">
    angular.module('files', [])
        .controller('MainCtrl', [function() {
              this.collection = @Json.Encode(YourCollection);
         }]);
</script>

פורסם במקור בפורום CODE613 ב03/03/2016 18:51 (+02:00)

avr416

תודה רבה mat ודוד ל.ט.!

@דוד ל.ט.

(אתה יכול להכניס את הJSON ישר בתוך מנוע הView של הRazor).

לא הבנתי מה הכוונה??
@דוד ל.ט.

אני חושב שאכן אתה יכול להמשיך הכל כרגיל ולהתמש רק בניווט של אנגולר וכן ראיתי פה: http://stackoverflow.com/a/27182836/1271037
אבל אני רק בעמוד 70 אז אני לא מתערב.

מעולה!! זה בדיוק מה שאני מחפש, נראה איך זה ילך.
וכמובן, ברור שזה רק פתרון זמני, כי עקרונית הכי טוב שהכל יהיה ע"י JSON..

פורסם במקור בפורום CODE613 ב03/03/2016 18:20 (+02:00)

dovid

@avr416

לא הייתי פה שבוע.. ואני רואה שזה הפך לדיון על אנגולר :lol:
דווקא אני מאד התלהבתי מאנגולר, ואפי' השגתי ספר שמלמד אותו (angularJs - up and running באנגלית כמובן..)

!! אני אוחז בעמוד 70

@avr416

אך עדיין לא הצלחתי להבין האם כשארצה להשתמש באנגולר, אצטרך שצד השרת יספק רק את הנתונים בצורה של json וכדו' ובקליינט אני אכתוב תבניות HTML שהתוכן יוזרק לתוכם ע"י הבינדינג של אנגולר, וממילא אני צריך לשנות את כל צד השרת שלי להחזיר JSON, ולבנות בנוסף קליינט אנגולרי?
או שמא ישנה אפשרות גם באנגולר לקבל מהשרת HTML מוכן ע"י AJAX, ולשתול אותו במקום הנכון, כך שלא אצטרך (כרגע.. כי עקרונית ברור לי שהכי נכון לעשות שהשרת יחזיר JSON וכל העבודה תתבצע בצד הלקוח - מבחינת חיסכון במשאבים בשרת, וכן ייתרון של מהירות כיון שזה חוסך בתעבורה ברשת) לשנות את צד השרת שבנוי כבר ע"י razor וכל מה שאני צריך זה להוסיף לו את מערכת הניווט??

(אתה יכול להכניס את הJSON ישר בתוך מנוע הView של הRazor).
אני חושב שאכן אתה יכול להמשיך הכל כרגיל ולהתמש רק בניווט של אנגולר וכן ראיתי פה: http://stackoverflow.com/a/27182836/1271037
אבל אני רק בעמוד 70 אז אני לא מתערב.

@avr416

mat היקר, אשמח אם יש לך תשובה בשבילי..
(כמובן גם לכל אחד אחר :lol: רק נראה לי של mat יש את הניסיון עם אנגולר..)
תודה רבה רבה מראש!!

mat זה לא רק בגלל נסיון באנגולר. זה בגלל שזה mat.

פורסם במקור בפורום CODE613 ב03/03/2016 18:04 (+02:00)

magicode

הכל אפשרי.
רק שהדרך הנכונה לעבוד עם אנגולר זה דרך JSON.

פורסם במקור בפורום CODE613 ב03/03/2016 17:48 (+02:00)

avr416

לא הייתי פה שבוע.. ואני רואה שזה הפך לדיון על אנגולר :lol:
דווקא אני מאד התלהבתי מאנגולר, ואפי' השגתי ספר שמלמד אותו (angularJs - up and running באנגלית כמובן..)

אך עדיין לא הצלחתי להבין האם כשארצה להשתמש באנגולר, אצטרך שצד השרת יספק רק את הנתונים בצורה של json וכדו' ובקליינט אני אכתוב תבניות HTML שהתוכן יוזרק לתוכם ע"י הבינדינג של אנגולר, וממילא אני צריך לשנות את כל צד השרת שלי להחזיר JSON, ולבנות בנוסף קליינט אנגולרי?
או שמא ישנה אפשרות גם באנגולר לקבל מהשרת HTML מוכן ע"י AJAX, ולשתול אותו במקום הנכון, כך שלא אצטרך (כרגע.. כי עקרונית ברור לי שהכי נכון לעשות שהשרת יחזיר JSON וכל העבודה תתבצע בצד הלקוח - מבחינת חיסכון במשאבים בשרת, וכן ייתרון של מהירות כיון שזה חוסך בתעבורה ברשת) לשנות את צד השרת שבנוי כבר ע"י razor וכל מה שאני צריך זה להוסיף לו את מערכת הניווט??

mat היקר, אשמח אם יש לך תשובה בשבילי..
(כמובן גם לכל אחד אחר :lol: רק נראה לי של mat יש את הניסיון עם אנגולר..)
תודה רבה רבה מראש!!

פורסם במקור בפורום CODE613 ב03/03/2016 17:34 (+02:00)

תחומים - פורום חרדי מקצועי

Single Page App: מערכת ניתוב