Up next in 10
Single Page Applications_ Why & When to use React_Angular_Vue.js_
410 views
Feb 16, 2024
In this video, "Single Page Applications: Why & When to Use React, Angular, Vue.js," viewers will gain insights into the advantages and appropriate scenarios for utilizing popular JavaScript frameworks like React, Angular, and Vue.js in developing single-page applications (SPAs). The video likely explores the unique features and strengths of each framework, such as React's component-based architecture, Angular's robust ecosystem, and Vue.js's simplicity and flexibility. Additionally, it may discuss factors to consider when choosing the most suitable framework for a specific project, such as project requirements, scalability, and developer expertise. Overall, the video aims to help developers make informed decisions about selecting the right framework for building efficient and responsive single-page applications.
View Video Transcript
0:00
Guys, आज के इस वीडियो में आप लोग बात करेंगे कि क्या होती है Single Page Applications
0:04
और आप लोगों को क्यों यूज़ करनी चाहिए Single Page Applications बहुत सारे लोगों का सवाल ही होता है क��
0:08
React, Angular, Vue.js और ये सारे जो Frameworks आ रहे हैं इनको इस्तिमाल करें तो करें क्यो��
0:13
यार HTML, CSS, JavaScript सीख ली, back-end सीख लिया, अब ये नई चीज कहां से आ गई, single page application, Angular, React, ये सब चीजों के बारे में इस वीडियो में discuss करेंगे, let's get started
0:24
जब भी मैं किसी को web development का basic बताता हूँ, तो उसको मैं यह बताता हूँ कि एक basic website किस तरह से काम करती है
0:33
for example, अगर मैं बात करो एक basic website की, तो वो back-end से data को request करती है, जो client है, जो कि आपका computer है, अगर मैं इस computer में कोई एक website कोलता हूँ यहाँ पर
0:43
तो मैं करूँगा गया basically server से कहूँगा कि या server इस URL से related files बुझे भेज द��
0:49
और server क्या करेगा उस URL से related files बुझे भेज देगा और वो files मेरा browser पार्स करक��
0:54
कुछ इस तरह से दिखाएगा देखो दो websites खुली हुई है आपर और आप लोगों को जो data ह��
0:59
वो कुछ इस तरह से आपका browser दिखा देगा, अब चलो ये चीज हो गई, अब single page application क्या है
1:04
react और angular क्यों इस्तेमाल करें, बहुत सारे लोग react angular पढ़ाते हैं, without actually teaching students क��
1:10
वो क्यों पढ़ रहे है react या angular, मैं आप लोगों को बताता हूँ, क्यों आप लोगों सिंगल पेज आपलिकेशन के फ्रेमवर्क की जरूरत पड़ सकती ह��
1:16
और क्या सिंगल पेज आपलिकेशन का फ्रेमवर्क इंपोर्टेंट होता भी है या नहीं होता ह��
1:21
ये भी मैं आप लोगों जल्दी से बता देता हूँ देखो यार अगर आप लोग एक website बनाते ह��
1:26
तो अगर आपके website के number of users बहुत कम है तो कोई tension ही नहीं ह��
1:30
आप उसको सबसे कम से कम optimization का इस्तेमाल करके बनाओ अगर आपका page एक से दो second में भी load हो रहा है तो कोई दिक्कत नहीं ह��
1:38
यार अगर पांच ही लोग use कर रहे हैं फिर हो सकता है कि यार सिर्फ आप use कर��
1:42
मैंने अपनी life में ऐसी बहुत सारी websites बनाई हैं जो कि local host में पढ़ी हुई हैं और उसको सिर्फ मैं ही use करता हूँ मुझे host करने की जरूरत ही नहीं है क्योंकि उसको सिर्फ मैं ही use करता हू��
2:08
सरवर से तब आ जाएगी दिक्कत वेन आ इसे दिक्कत मेरे कहने का बतल��
2:12
यह है कि आपके सरवर पर लोड बढ़ेगा और आपके यूजर्स क��
2:16
थोड़ा सा टाइम जादा देखने को मिलेगा आपके बेज डिलोड जो होंगे वो थोड़े स��
2:20
ज्यादा time में होंगे और ऐसा क्यों होगा यह भी मैं आप लोगों को बता देता हूँ अब एक website imagine करो एक website में एक header होता है एक main content होता है और एक footer होता है यह एक basic website का layout है अब अगर मार लो code with harry.com का जो home page है वो directly ऐसा ही बना हुआ है तो header main जो आपका वहाँ पर content है वो और न��
2:50
अब अगर किसी को codewithharry.com slash videos पर जाना है, तब वापस से मैं वो header मगाऊंगा
2:56
वो main content जो की इस बार अलग होगा, और footer जो की same होगा, वो मैं दुबारा मगाऊंगा
3:00
अब किसी ने अगर codewithharry के blog पर click किया, तब उसको वापस से कुछ नया content देखने को मिलेगा
3:20
रहेगा तो एक पेज, एक पेज होगा, लेकिन user को प्रतीथ होगा कि अलग-अलग पेज है, एक बार और बोलूंगा इस बात को, होगा तो एक ही पेज, लेकिन user को प्रतीथ होगा कि अलग-अलग पेज है
3:32
तो basically single page application वाले framework जैसे कि angular react view js आप लोगों से क्या गहते हैं मैं आपको बाताता हूँ वो यह कहते हैं कि यार देखो हमारा कुछ syntax है हमारे कुछ rules है तुम उसके इसापसे अपनी website को लिख दो और एक बार तुम उन rules के इसापसे अपनी website को लिख दोगे उसके बाद build command run कर दो ��
4:02
इन वर्क के द्वारा बनी गई इस सिंगल पेज अप्लीकेशन में आप लोग क्या कहोगे आप कुछ ऐसी बातें करोगे कि यार देखो हैडर तो है अपने पास फूटर भी है अपने पास और बीच का में अपने पास किसी ने कोड विदेड��
4:14
content javascript change Angular React
4:52
मैं simply अपनी javascript में code लिख दूँगा ना बीच के content को change करने क��
4:56
लेकिन आप बिल्कुल ऐसा कर सकते हो ऐसा कुछ नहीं है कि जो कि आप react angular से कर सकते ह��
5:01
और normal javascript से नहीं कर सकते हो technology कोई बदली नहीं है HTML, CSS और javascript ही at the end of the day
5:07
आपका Angular और React आप लोगों को split करके देगा बट आसानी हो जाती ह��
5:12
अगर आप खुद लिखने बैटे दे जावास्क्रिप्ट तब आप लोगों को बहुत जादा दिक्कत होग��
5:16
अगर आप लोगों ने Angular, React वगैरा जैसे framework का इस्तेमाल कर लिय��
5:21
तो वो आप लोगों के लिए बहुत सारी चीज़ें आसान मना देते हैं पर एजांपल आंग्यूलर में directives होती हैं बहुत अच्छी अच्छ��
5:26
फिर आपकी react के अंदर hooks होते हैं जो कि आपके काम को आसान बनाते है��
5:31
तो जो काम आप शायद 25-30 lines of code में करते है��
5:35
उसकी एक directive आपको प्लब दोती है, आप अपनी directive बना सकते हैं angular में
5:39
अब ये सारे concepts क्या होते हैं, इसके बारे में भी हम discuss नहीं करेंगे, क्योंकि मैंने already react का और angular का video बना रखा है
5:45
वो आप देख लेना बाद में जाकर, पर यहाँ पर just आप लोगों को idea दे रहा था क्योंकि जब भी Angular और React पढ़ने कोई भी जाता है उसका पहला सवाल यही होता है कि आप क्यों आपने तो कहा था कि HTML, CSS, JavaScript से website बन थी और अब आप कह रहे हो यहाँ React सीख लो Angular सीख ल��
5:58
तो आपको कम से कम ये तो समझ में आ गया होगा कि यार react angular जैसे framework back-end में javascript और कुछ other tools का इस्तिमाल करते हैं और आपके द्वारा javascript लिखने के effort को minimize करते हैं effort लगता है लेकिन minimize करते हैं एक बार आपने react angular जैसा framework सीख लिया तो आप बड़े आराम से ये SPA बना सकते हो वैस��
6:28
एक्टर एंगुलर में क्या होता है कुछ variables होते हैं और वो variables जैसे ही आप update करोगे javascript के आपके page में बिना reload हुए जो content है वो update हो जाएगा for example अगर मैंने heading करके एक heading दे रही है अपने page में और मैंने heading variable को choose किया हुआ है code with harry videos अगर कोई code with harry videos से code with harry blog में जाएगा तो मैं उस heading
6:58
हो जाएगा, बहुत सारे लोगों का सवाल यह भी होता है कि TypeScript क्यों यूज़ करते हैं, TypeScript क्या चीज़ ह��
7:02
तो TypeScript क्या करती है कि JavaScript में जो की Type Safety है उसको introduce करती ह��
7:09
कहने का बतलब यह है कि अगर आप JavaScript में कोई भी variable बनाते है��
7:12
for example आपने एक string बनाई और आप अपने code में उसको एक number के बराबर कर देते है��
7:16
तो weird bugs आ सकते हैं आपके application में और आपको पता भी नहीं चलेगा कि यार ये bug इसलिए आया ह��
7:21
क्योंकि आपने वो जो particular string है उसको equate कर दिया एक number क��
7:25
type script आपको पहले ही रोक लेगी वहीं पर सेंटेक्स एरर दे देगी, आपको कि यार कोई चीज जो की स्ट्रिंग है, वो नंबर नहीं हो सकती, तो आप किसी भी डेटा के टाइप्स आप लोग डाल सकते हैं, वरियबल के डेटा टाइप्स अपलोग डाल सकते हैं, आप बता सकते हैं, यार एक वरियबल स्ट��
7:57
होती है, TypeScript सिर्फ एक tool है developer द्वारा जो कि इस्तेमाल किया जाता है JavaScript को bug free लिखने के लि��
8:03
so I hope कि ये आप लोगो पता चल गया आपकी single page application क्या ह��
8:07
TypeScript क्यों इस्तेमाल करते हैं और basic जो technology है वो HTML, CSS
8:11
और JavaScript भी है at the end of the day HTML, CSS और JavaScript भी आपक��
8:15
ब्राउजर पार्स करेंगे, आप, I hope की आइडिया आप लोगों को लग गया, ठीक है, अब बात करते हैं, क्या चीज़ अच्छी है, क्या मुझ��
8:21
जैंगो यूज करना चाहिए क्या बुझे जैंगो के अंदर HTML टेंपलेट यूज करने चाहिए फिर फ्लास्क यूज करना चाहिए फोर देट मैटर अगर मैं एक बना रहा हूँ एप्लीकेशन या फिर मैं नोडी एक्सप्रेस यूज करो या पीएसपी में एक्सप्रेस यू��
8:51
अगर एक ऐसी application बनाना है जिस पर जादा users नहीं बैठने वाले हैं
8:56
तो आप लोग आराम से बना सकते हो पी एच पी में, नोट जिस में, इन सब चीजों में
9:00
एक चीज और जो बहुत सारे लोग miss कर देते हैं और note नहीं करते हैं, वो यह है कि अगर आप Angular में एक application लिख रहे ह��
9:05
तो आपको APIs बनानी पड़ेंगी बहुत सारी APIs बनानी पड़ेंगी और यह APIs back-end में आप लोगों को बनानी पड़ेंग��
9:11
क्योंकि जो Angular है वो एक front-end का framework है at the end वो आप लोगों को static files देता ह��
9:17
जो की interact कर सकती है किसी back-end API से तो आपको back-end की APIs अलग से बनानी पड़ेंग��
9:24
पर example Django REST में आप बना सकते हो Node Express PHP APIs Flask APIs angular machine
9:39
नहीं Angular सिर्फ एक frontend का framework है, उसमें सिर्फ आप frontend लिख सकते हो
9:43
HTML, CSS और JavaScript में, जो कि आप शायद लिखते हैं, अब आप वो Angular में लिख रहे हो
9:47
ठीक है, इस चीज़ को ऐसे दिखो, और जो back-end है आपका, जो कि Django में हो सकता है
9:51
Django Rest में हो सकता है, या flask में हो सकता है वो आपको अभी भी लिखना पड़ेग��
9:56
तो हाँ थोड़ा सा extra effort है angular में अगर आप लोग एक application लिख रहे है��
10:00
लेकिन बहुत आसान हो जाता है code manage करना अगर आप लोग एक बड़े code base को बना रहे है��
10:04
मैं अगर मुझे कोई ऐसी application जो की मैं बना रहा हूँ जिसमें मुझे लगता है क��
10:08
traffic नहीं आएगा मैं उसको angular में नहीं मनाता हूँ मैं उसको जल्दी से jango मे��
10:14
flask में या node express में बना देता हूँ पट कभी कभी ऐसा होता है क��
10:19
आपका जो traffic है वो बढ़ सकता है website पर for example जब मैंने अपन��
10:22
website codewithharry.com बनाई थी initially मैंने उसको flask में बनाया था और बहुत��
10:26
ऐफ़े सोचकर बनाया था कि या इसको तो कोई देखने वाले ही नहीं है शायद ही कोई कभी आक��
10:30
इस website से source code download करके चला जाए बट उसके बाद हुआ क्या eventually बहुत सार��
10:36
लोगों ने उसको इस्तेमाल किया बहुत सारे लोगों को वह हेल्पफुल लगी क्योंकि एक ही जगह पर सारे वीडियोस और फिर उसके बाद सोर्च कोड नोट सब कुछ मैं डालना था वहाँ पर तो लोगों ने उसको सर्च करने के लिए भी यूज किया और धीरे धीरे धी��
11:06
कि आर आपने जो initially सोचा था कि आर इसको तो कोई use ही नहीं करेगा अब actually इसको बहुत सारे लोग use कर रहे हैं और आपके लि��
11:11
वो से application का महत्व बहुत बढ़ जाता है तो इसलिए मैं कहता हूँ कि कभी भी आप लोगों को थोड़ा सा भी लगता ह��
11:17
आपकी application पर traffic आने वाला है तो आप लोग use करे��
11:21
angular जैसा frontend framework along with some backend APIs तो अगर server के load को कम करना ह��
11:27
आपको तो आप use करें angular जैसे frontend framework को वरना अगर आपक��
11:31
users वो बहुत जादा नहीं है तो आप लोग jango जैसे backend framework का इस्तेमाल करक��
11:37
उसमें templates लगा कर अपनी website को बना सकते हैं बस होगा यह कि बार-बार आपका जो page हो रेलोड होग��
11:42
जैसे आपका user navigate करेगा SPA यानि कि single page application में अगर user navigate करेग��
11:47
तो उसको ऐसे लगेगा कि वो एक Android app का इस्तेमाल कर रहा है जैसे वो click करेगा वैसे ही आपकी application react करेग��
11:52
एक बहुत अच्छा user experience होता है तो बेहतर कुछ भी नहीं ह��
11:56
development time थोड़ा से जादा है single page application का और management थोड़ा से जादा ह��
12:00
अगर आप लोग कोई CICD pipeline बनाना चाते हो जिसमें कि आप लोग अपने code क��
12:05
push करोगे एक GitHub जापर किसी भी और Git service पर और उसके बाद वहाँ से आप pull करोगे code क��
12:11
frontend आपको अलग से maintain करना backend APIs आपको अलग से maintain करन��
12:15
अगर backend APIs down हो गई तो वो सारी error handling को आपको लिखना है यहाँ पर Angular की SPA मे��
12:20
तो वो सारे काम आप लोग को करने पड़ेंगे तो जो भी enterprise वगैरा होती ह��
12:24
जैसे अगर आप YouTube की website कोई देख लें तो वो single page application ह��
12:28
बहुत सारे examples हैं हमारे पर single page application के जहां पर भी traffic बहुत जाता होता है वहाँ पर जो enterprises है��
12:35
वो Angular या React जैसे SPA framework का इस्तेमाल करती है तो हम लोग एक काम करेंगे अभी computer के अंदर चलेंगे और वहाँ प��
12:42
थोड़ा सा example देख लेंगे single page applications का और आप लोगों को एक idea दे दूँगा कि कैसे दिखती ह��
12:48
single page application in case अगर आप लोगों नहीं देखी है तो तो चलते हैं computer screen के अंदर और सारे doubts वहाँ पर त��
12:54
100% clear हो जाएंगे so guys यहाँ पर मैं आ चुका हूँ internet पर और मैं कोई भी random जी website खोलता हूँ, मैं आपको getbootstrap.com खोलता हूँ, और आपने देखा है यहाँ पर, कि जो getbootstrap.com है, उससे एक पेज से दूसरे पेज पर, जैसे ही मैं जाता हूँ, आप उपर देखो यहाँ पर, उपर, जैसे ही आप देखो कि यहाँ पर, उपर वाले, ��
13:27
जाता था कि जो चीज आपकी बार-बार लोड होकर आ रही है उसको आप जितना हलका हो सके उतना रखें यहां पर सिर्फ उतना ह��
13:32
कंटेंट आप लोग रखें जितना बार-बार इसको लाने में हर पेज के रिलोड पर जो है ऑप्टिमाइज रहे मतलब चीजें इस तरह स��
13:40
आप लोग रखें इसको अब footer और header जो है वो बार बार आ रहे हैं अलाइकि मैं footer तक अभी गया भी नहीं हू��
13:44
तो उसके बाद भी जो content है वो बार बार आये जा रहा है तो अगर बात करें single page applications की तो यहाँ प��
13:51
मैं example लेना चाहूँगा YouTube का, एक बहुत अच्छा example single page application का
13:54
जो कि पहले single page application नहीं था, तो YouTube वालों ने जरूर यह सोचा होगा, यार इतना सारा traffic है
13:59
इतना सारे लोग आते हैं, रोज वीडियो watch करते हैं, तो जब भी एक page से दूसरे page पर कोई भी user जा रहा है
14:45
प्रेमाइज करेंगे चीजों को यहां पर आप लोग देख सकते हो कि मैं क्लिक कर रहा हूं तो ऐसा लग रहा है जब फोन मे��
14:50
मैं कर रहा हूं मोबाइल एप्लीकेशन हो तो यह सिंगल पेज एप्लीकेशन इसके सोर्स कोड को अगर हम लोग देखे��
14:55
देखो यहाँ पर एक पेज होता है और एक पेज के साथ जवास्क्रिप्ट होती है और वह जवास्क्रिप्ट क्या करती है रिस्पॉन्सिबल होती है एक कंपोनेंट से दूसरे कंपोनेंट को लोड करने में फॉर एक्जांपल यह अगर यहाँ पर अपलोड कंपोनेंट है त��
15:25
बिल्कुल पेज रिलोड नहीं हो रहा है तो यह सिंगल पेज आप्लीकेशन यहां पर आपको एक लोडिंग बार दिख रहा है जब तक आपका कंडेंट ज��
15:32
वह आना जाए तो यहां पर एक बहुत अच्छा एक्सपीरियंस यह देता यूजर को दिखा एक्सांपल अगर यहां पर आप लोग देखे��
15:38
तो देखो यहाँ पर कोई जावास्क्रिप्ट लिखी हुई है और जावास्क्रिप्ट लिखने के साथ साथ एक सिंपल्स हमारा HTML पेज है तो इसके कोड को अगर आप रीड़ आउट करने की कोशिश करें यहाँ पर तो देखो हमारी जो यहाँ पर एक एलिमेंट है बॉडी क��
16:08
की साहिता से, isn't it amazing, तो एक element के अंदर क्या content रहेगा, ये decide कर रही है सारी javascript files, और ये javascript files के अंदर लिखा हुआ strong logic, जो के decide कर रहा है, कि जो आपकी angular की application है, उसके अंदर कौन सी जगा पर क्या चीज रहेगी, ठीक है, और एक फा hardness और जो मैं आप लोगों बताना चाहता ह��
16:38
आपको आपके शोहर जावास्क्रिप्ट ऑफिस्केट भी मैं आप लोगों को बता देता हूं जो आप फिर केशर होता है जावास्क्रिप्��
16:45
वो यह होता है कि यहाँ JavaScript कोड कोई दूसरा न चुरा सके, बहुत आसानी से न आपके JavaScript कोड को पढ़ सके
16:50
तो यहाँ पर online obfuscator में मैं आप लोग को एक idea देता हूँ, कि अगर आप obfuscate करते हैं इस code को
16:55
तो यह कुछ ऐसा बन जाता है, देख रहे हो आप लोग, यहाँ पर ऐसा बन जाता है code, तो यह code तो समझना आसान है क्या किया जा रहा है इस code में आपने को मालूम है
17:01
लेकिन यह code समझना इतना आसान नहीं है, यह code समझना जो है तोड़ा सा मुश्किल हो जाता है
17:05
तो उसी तरह काम जो है Angular आपको built-in देता है, आप लोगो ऑफिसकेशन वगैरा करके देता है, और इसे के साथ साथ JavaScript को ऐसा बना देता है कि कोई भी इंसान आपकी website को बहुत आराम से तो script नहीं कर सकता, ठीक है, तो यहाँ पर Angular React इस तरह की जो single-viz application से यह फाइदे होते हैं
17:35
टाइम काफी ट्राफिक है इस वेबसाइट पर अभी भी तो यहां पर अगर मैं ब्राउस वीडियो टिटोरियल्स पर क्लिक करू��
17:40
तो पूरा पेज लोड हो रहा है और स्टार्ट वॉचिंग पर अगर मैं क्लिक करूं तो पूरा पेज लोड हो रहा है उसके बा��
17:45
बहुत सारी यूजर्स आते हैं इन फ्यूचर तो हेडर का अलग से कंपोनेंट बनाना इसका एक अलग से कंपोनेंट बनाना फूटर का एक अलग से कंपोनेंट बनाना जो है वो काफी ज्यादा रेकमेंडेड हो जाएगा काफी जो है सिंगल पेज आप्लिकेशन के फीचर्स ��
18:15
इस वीडियो में इतना है आपको सब कुछ समझ ले आप लोग आपका क्या कहना सिंगल पेज अप्लीकेशन के बारे में आपको अगर वीडियो चाहिए कि कौन सा सिंगल पेज अप्लीकेशन फ्रेमबर्क अच्छा है तो मुझे बता देना कॉमेंट्स में मैं वह वीडियो भ��
18:45
guys for watching this video and i will see you next time
#Flash-Based Entertainment
#Fun & Trivia