ኣብ 2016 ጃቫስክሪፕት ክትመሃር ከለኻ ከመይ ይስምዓካ

ኣብ እዋን ምጽሓፍ እዚ ጽሑፍ ዝኾነ ናይ ጃቫስክሪፕት ፍሬምዎርክ ኣይተፈጥረን ።

እዚ ዝስዕብ ካብቲ “መጻኢ እዩ” ዝብል ጽሑፍ ካብ ዓንኬል ሲ.ኣይ. እቲ ኦሪጅናል ኣብዚ ከተንብቡ ትኽእሉ ኢኹም ። እዚ ቁንጣሮ ርእይቶ ጥራይ እዩ፣ ከም ዝኾነ ጃቫስክሪፕት ፍሬምዎርክ ድማ ኣዝዩ ብዕቱብ ክውሰድ የብሉን።

እሂ እዚ ሓድሽ ናይ ዌብ ፕሮጀክት ረኺበዮ፡ ሓቂ ንምዝራብ ግን ድሕሪ ቁሩብ ዓመታት ብዙሕ ዌብ ኮድ ኣይገበርኩን ቁሩብ ድማ መልክዓ ምድሪ ክቕየር ሰሚዐ ኣለኹ። ኣብዚ ከባቢ እቲ ዝያዳ እዋናዊ web dev ኢኻ ሓቀይ?

- እቲ ጭቡጥ ቃል Front End engineer እዩ፡ ግን እወ ኣነ ትኽክለኛ ወዲ እየ። I do web in 2016. ቪዥዋላይዜሽን፡ መጻወቲ ሙዚቃ፡ ኩዕሶ ዝጻወታ ዝነፍራ ድሮናት፡ ንስኻ ስም ኣውጽኣሉ። ካብ JsConfን ReactConfን ጥራይ እየ ተመሊሰ፡ ስለዚ ዌብ ኣፕ ንምፍጣር ዝሕግዙ ሓደስቲ ቴክኖሎጂታት እፈልጥ እየ።

ሰናይ። ካብቶም ተጠቀምቲ ዝመጽእ ናይ መወዳእታ ንጥፈት ዘርኢ ገጽ ክፈጥር ኣለኒ፣ ስለዚ ነቲ ዳታ ካብቲ REST መወዳእታ ነጥቢ ረኺበ ኣብ ገለ ዓይነት ክጽረግ ዝኽእል ሰደቓ ከርእዮ ጥራይ እዩ ዘድልየኒ፣ ኣብቲ ሰርቨር ዝኾነ ነገር እንተተቐይሩ ድማ ከዘምኖ ኣለኒ። ምናልባት jQuery ተጠቒምካ ነቲ ዳታ ንምምጻእን ንምርኣይን ይኸውን ኢለ እየ ዝሓስብ ነይረ?

- ኣየ ኣምላኸይ ኣይፋልን ድሕሪ ሕጂ jQuery ዝጥቀም ሰብ የለን። ሪኣክት ክትመሃር ክትፍትን ይግባእ፡ 2016 እያ።

ኣየ ሕራይ። ሪኣክት እንታይ እዩ?

- ብገለ ደቂ ተባዕትዮ ኣብ ፌስቡክ ዝተሰርሐ ሱፐር ዝሑል ቤተ-መጻሕፍቲ እዩ፣ ብሓቂ ኣብ ኣፕሊኬሽንካ ቁጽጽርን ኣፈጻጽማን የምጽእ፣ ዝኾነ ናይ ርእይቶ ለውጢ ኣዝዩ ብቐሊሉ ክትሕዞ ብምፍቃድ።

እዚ ጽፉፍ ይመስል። ካብቲ ሰርቨር ዳታ ንምርኣይ React ክጥቀም ይኽእል ድየ?

- እወ ግን መጀመርታ ኣብ መርበብ ሓበሬታኻ React and React DOM ከም ላይብረሪ ክትውስኽ ኣለካ።

ጽናሕ ንምንታይ ክልተ ቤተ መጻሕፍቲ?

- ስለዚ እቲ ሓደ እቲ ጭቡጥ ቤተ-መጻሕፍቲ ክኸውን ከሎ እቲ ካልኣይ ድማ ን DOM ንምትላል ዝኸውን ኮይኑ፡ ሕጂ ኣብ JSX ክትገልጾ ትኽእል ኢኻ።

JSX? JSX እንታይ እዩ?

-JSX ዳርጋ ንXML ዝመስል ናይ ጃቫስክሪፕት ስነ-ቓል መቐጸልታ ጥራይ እዩ። ንDOM ንምግላጽ ካልእ መንገዲ እዩ፣ ከም ዝሓሸ HTML ሕሰቦ።

ኣብ ኤችቲኤምኤል እንታይ ጸገም ኣለዎ?

- 2016 እዩ ድሕሪ ሕጂ ብቐጥታ HTML ኮድ ዝገብር ሰብ የለን።

ትኽክል። ብዝኾነ ነዘን ክልተ ላይብረሪታት እንተ ወሲኸለን ሽዑ React ክጥቀም ይኽእል እየ?

- ምሉእ ብምሉእ ኣይኮነን። ባቤል ክትውስኽ ኣለካ፡ ድሕሪኡ ሪኣክት ክትጥቀም ትኽእል።

ካልእ ቤተ መጻሕፍቲ? ባቤል እንታይ እያ?

- ኣየ ባቤል ኣብ ዝኾነ ስሪት ጃቫስክሪፕት ኮድ እናገበርካ ንፍሉያት ስሪት ጃቫስክሪፕት ዕላማ ክትገብር ዘኽእለካ ትራንስፓይለር እዩ። ReactJS ንምጥቃም Babel ከተካትት ኣየድልየካን እዩ፡ እንተዘይገይርካ ግን ES5 ምጥቃም ተሸኺልካ ኣለኻ፡ ናይ ብሓቂ ድማ ንኹን፡ 2016 እያ፡ ከምቲ ዝተረፉ ዝሑላት ቆልዑ ዝገብርዎ ኣብ ES2016+ ኮድ ክትገብር ይግባእ ።

ES5? ES2016+? ኣብዚ ይጠፍእ ኣለኹ። ES5ን ES2016+ን እንታይ እዮም?

-ES5 ንECMAScript 5 ማለት እዩ።ኣብዚ እዋን እዚ ብመብዛሕትኦም መርበብ ሓበሬታታት ስለዝተተግበረ መብዛሕትኦም ሰባት ዕላማ ዝገበረ ሕታም እዩ።

ኢሲማስክሪፕት?

- እወ ትፈልጡ ኢኹም፡ እቲ ስክሪፕቲንግ ስታንዳርድ ጃቫስክሪፕት ኣብ 1999 ድሕሪ ናይ መጀመርታ ምውጽኡ ኣብ 1995 ዝተመርኮሰሉ እዩ ነይሩ፡ ሽዑ ጃቫስክሪፕት ላይቭስክሪፕት ተባሂሉ ተሰይሙ ኣብ ኔትስኬፕ ናቪጌተር ጥራይ ዝሰርሕ ዝነበረ። ሽዑ ኣዝዩ ዕግርግር ዝመልኦ እዩ ነይሩ፡ ምስጋና ይግበኦ ሕጂ ግን ነገራት ኣዝዮም ንጹር ኮይኖም ኣለዉ፡ ከም፡ 7 ሕታማት ናይዚ ኣተገባብራ።

7 ሕታማት። ብሓቂ። ከምኡ ውን ES5ን ES2016+ን ድዮም?

- ሓሙሻይን ሻብዓይን ሕታም ብቕደም ተኸተል።

ጽናሕ ምስታ ሻድሻይ እንታይ ኮይና?

- ES6 ማለትካ ድዩ? እወ ማለተይ ነፍሲ ወከፍ ሕታም ናይቲ ዝሓለፈ ሱፐርሴት ስለ ዝኾነ ES2016+ ትጥቀም እንተኾንካ ኩሉ ባህርያት ናይተን ዝሓለፋ ስሪት ትጥቀም ኣለኻ ማለት እዩ።

ትኽክል። ከምኡ ውን ንምንታይ ሽዑ ES2016+ ኣብ ልዕሊ ES6 ንጥቀም?

-ጽቡቕ፡ ES6 ክትጥቀም ትኽእል ኢኻ፡ ግን ከም async and wait ዝኣመሰሉ ዝሑላት ባህርያት ክትጥቀም፡ ES2016+ ክትጥቀም ኣለካ። እንተዘይኮይኑ ምስ ES6 ጀነሬተራት ምስ coroutines ተዓጽኻ ኣለኻ ንኣሲንክሮናዊ ጻውዒታት ንዝግባእ ናይ ምቁጽጻር ዋሕዚ ንምዕጋት።

ሕጂ እንታይ ከም ዝበልካ ሓሳብ የብለይን፡ እዚ ኩሉ ኣስማት ድማ ምድንጋር እዩ። ርኣዩኒ ካብ ሰርቨር ዕስለ ዳታ ጥራይ እየ ዝጽዕን ዘለኹ፣ ቀደም ካብ CDN jQuery ጥራይ ከእትዎን ብAJAX calls ጥራይ ዳታ ክረክብን ይኽእል ነይረ፣ ስለምንታይ ከምኡ ጥራይ ክገብር ዘይክእል?

- 2016 ሰብኣይ እዩ፡ ድሕሪ ሕጂ jQuery ዝጥቀም ሰብ የለን፡ ኣብ መወዳእታ ኣብ ዕስለ ስፓጌቲ ኮድ እዩ ዝውዳእ። ኩሉ ሰብ ይፈልጦ እዩ።

ትኽክል። ስለዚ ኣማራጺይ ሰለስተ ላይብረሪታት ጽዒነ ዳታ ኣምጺአ HTML table ምርኣይ እዩ።

- ጽቡቕ ነተን ሰለስተ ላይብረሪታት ኣካቲትካየን ግን ምስ ሞዱል ማናጀር ትጠቕለለን ሓደ ፋይል ጥራይ ክትጽዕን።

ይርኢ። ከምኡ ውን ሞዱል ማናጀር እንታይ እዩ?

- እቲ ትርጉም ኣብ ከባቢ ይምርኮስ፣ ኣብ መርበብ ሓበሬታ ግን መብዛሕትኡ ግዜ ዝኾነ ነገር AMD ወይ CommonJS ሞዱላት ዝድግፍ ማለተይና እዩ።

ሪይይት. ከምኡ ውን AMDን CommonJSን...?

- ትርጉማት። ብዙሓት ናይ ጃቫስክሪፕት ቤተ-መጻሕፍትን ክፍልታትን ብኸመይ ክራኸቡ ከም ዘለዎም ዝገልጽ መንገድታት ኣሎ። ትፈልጡ ዶ ሰደድን ዝጠልብን? ንAMD ወይ CommonJS API ዝገልጹ ብዙሓት ጃቫስክሪፕት ፋይላት ክትጽሕፍ ትኽእል ኢኻ ከምኡ ውን ከም Browserify ዝኣመሰለ ነገር ተጠቒምካ ክትጥርንፎም ትኽእል ኢኻ።

እሺ ትርጉም ኣለዎ... ይመስለኒ። Browserify እንታይ እዩ?

- CommonJS ዝተገልጹ ጽግዕተኛታት ናብ ኣብ መርበብ ሓበሬታ ክሰርሑ ዝኽእሉ ፋይላት ክትጥርንፎ ዘኽእለካ መሳርሒ እዩ። መብዛሕትኦም ሰባት ነቶም ጽግዕተኛታት ኣብ መዝገብ npm ስለ ዝዝርግሕዎም እዩ ተፈጢሩ።

npm መዝገብ?

- በላሕቲ ሰባት ኮድን ጽግዕተኛታትን ከም ሞዱል ዘቐምጥሉ ኣዝዩ ዓቢ ህዝባዊ መኽዘን እዩ።

ከም ሲዲኤን?

- ብሓቂ ኣይኮነን። ዝያዳ ዝኾነ ሰብ ቤተ-መጻሕፍቲ ክዝርግሖን ከውርዶን ዝኽእል ማእከላይ ዳታቤዝ ይመስል፡ ስለዚ ኣብ ከባቢኻ ንልምዓት ክትጥቀመሉ ትኽእል ኢኻ፡ ድሕሪኡ ድማ እንተደሊኻ ናብ ሲዲኤን ክትሰቕሎ ትኽእል።

ኣየ ከም ቦወር!

- እወ ግን ሕጂ 2016 እያ ድሕሪ ሕጂ ንቦወር ዝጥቀመሉ ሰብ የለን።

ኣየ ይርእዮ ኣለኹ... ስለዚ ሽዑ እተን ላይብረሪታት ካብ npm ምውራድ ኣለኒ?

-እወ። ስለዚ ንኣብነት React ክትጥቀም እንተደሊኻ React module ኣውሪድካ ኣብ ኮድካ ነእትዎ። ዳርጋ ንነፍሲ ወከፍ ህቡብ ቤተ-መጻሕፍቲ ጃቫስክሪፕት ከምኡ ክትገብር ትኽእል ኢኻ።

ኣየ ከም ኣንጉላር!

- ኣንጉላር ከምኡ እዩ 2015. ግን እወ። Angular ኣብኡ ምሃለወ፣ ጎኒ ጎኒ VueJS ወይ RxJSን ካልኦት ዝሑላት ናይ 2016 ቤተ-መጻሕፍቲን። ብዛዕባ እቶም ክትፈልጥ ትደሊ?

ምስ ሪኣክት ንጽናዕ፡ ድሮ ሕጂ ብዙሕ ነገራት ይመሃር ኣለኹ። ስለዚ፡ React ክጥቀም እንተድኣ ኣድልዩኒ ካብዚ npm ኣምጺአ ድሕሪኡ ነዚ Browserify ዝብል ነገር ይጥቀመሉ?

-እወ።

እዚ ድማ ንሓደ ዕስለ ጽግዕተኛታት ሒዝካ ጥራይ ከተእስሮም ካብ መጠን ንላዕሊ ዝተሓላለኸ ይመስል።

- ንሱ እዩ፣ ስለዚ ኢኻ ድማ ከም Grunt ወይ Gulp ወይ Broccoli ዝኣመሰለ task manager ን Browserify ንምስራሕ ኣውቶማቲክ ትጥቀመሉ። ሄክ፡ ሚሞሳ ከይተረፈ ክትጥቀም ትኽእል ኢኻ።

ምጉርምራም? ምውሓጥ? ብሮኮሊ? ሚሞሳ? ሕጂ ንዛረበሉ ዘለና ሄክ?

- ኣካየድቲ ዕማም። ድሕሪ ሕጂ ግን ዝሑላት ኣይኮኑን። ኣብ like፡ 2015 ተጠቒምናሎም፡ ድሕሪኡ Makefiles ተጠቒምናሎም፡ ሕጂ ግን ኩሉ ብ Webpack ንጠቕልሎ።

ሜክፋይላት? እዚ መብዛሕትኡ ኣብ C ወይ C++ ፕሮጀክትታት ዝጥቀመሉ መሲሉኒ።

- እወ ግን ኣብ መርበብ ሓበሬታ ነገራት ዝተሓላለኹ ምግባርን ድሕሪኡ ናብ መሰረታዊ ነገራት ምምላስን ንፈቱ ይመስል። ከምኡ ንገብር ዓመት ዓመት ወይ ከባቢ፡ ጥራይ ተጸበዮ፡ ድሕሪ ሓደ ወይ ክልተ ዓመት ኣብ መርበብ ሓበሬታ ኣሰምብሊ ክንገብር ኢና።

ብዓብዩ ምትንፋስ። ዌብፓክ ዝበሃል ነገር ጠቒስካ?

- ንብራውዘር ካልእ ሞዱል ማናጀር ኮይኑ ከምኡ ውን ዓይነት ዕማም ጎያዪ ኮይኑ። ከም ዝሓሸ ስሪት ናይ Browserify እዩ።

ኣየ ሕራይ። ስለምንታይ ይሓይሽ?

- ጽቡቕ ምናልባት ዝሓሸ ኣይኮነን፡ ጽግዕተኛታትካ ብኸመይ ክእሰሩ ከም ዘለዎም ዝያዳ ርእይቶ ጥራይ እዩ። Webpack ዝተፈላለዩ ሞዱላት ኣካየድቲ ክትጥቀም የኽእለካ፣ ናይ CommonJS ጥራይ ዘይኮነስ፣ ስለዚ ንኣብነት ተወለድቲ ES6 ዝድገፉ ሞዱላት።

ኣነ በዚ ኩሉ CommonJS/ES6 ነገር ኣዝየ ተደናጊረ ኣለኹ።

- ኩሉ ሰብ እዩ፡ ግን ድሕሪ ሕጂ ምስ SystemJS ክትግደሰሉ የብልካን።

ኢየሱስ ክርስቶስ ካልእ ስም-js. Ok, እዚ SystemJSከ እንታይ እዩ?

- ጽቡቕ፡ ዘይከም Browserifyን Webpack 1.xን፡ SystemJS ኣብ ክንዲ ኣብ ሓደ ዓቢ ፋይል ንብዙሓት ሞዱላት ኣብ ብዙሓት ፋይላት ክትኣስሮም ዘኽእለካ ዳይናሚክ ሞዱል ሎደር እዩ።

ጽናሕ ግን ቤተ-መጻሕፍትና ኣብ ሓደ ዓቢ ፋይል ክንሃንጽን ንሱ ክንጽዕንን ንደሊ መሲሉኒ!

- እወ ግን ሕጂ HTTP/2 ይመጽእ ስለዘሎ ብዙሓት HTTP ሕቶታት ብሓቂ ዝሓሸ እዩ።

ጽናሕ ስለዚ እተን ሰለስተ ኦርጅናል ላይብረሪታት ንሪኣክት ጥራይ ክንውስኸለን ኣይንኽእልን ዲና??

- ብሓቂ ኣይኮነን። ማለተይ ካብ ሲዲኤን ከም ናይ ደገ ስክሪፕት ክትውስኾም ትኽእል ኢኻ፡ ሽዑ ግን ገና ንባቤል ከተእትዎም ምተገደድካ።

ብዓብዩ ምትንፋስ። እዚ ድማ ሕማቕ እዩ ሓቀይ?

- እወ ንብምሉኡ ባቤል-ኮር ምሓወሰ ኔርካ፡ ንፍርያት ድማ ውጽኢታዊ ኣይምኾነን። ኣብ ምፍራይ ፕሮጀክትካ ንምድላው ተኸታታሊ ቅድመ ዕማማት ክትፍጽም ኣለካ እዚ ድማ ነቲ ንሰይጣን ንምጽዋዕ ዝግበር ስርዓት ከም ዝፈለሐ እንቋቑሖ ኣሰራርሓ መግቢ ክመስል ይገብሮ። ንብረት ከተጉድል ኣለካ፣ ክትጽይቖም ኣለካ፣ ኣብ ልዕሊ እቲ ዓጻፊ css ክትሰርሕ ኣለካ፣ ስክሪፕትታት ከተደናጉዮም ኣለካ፣ ከምኡ’ውን-

ረኺበዮ፡ ረኺበዮ። ስለዚ ነቶም ቤተ-መጻሕፍቲ ብቐጥታ ኣብ ሲዲኤን እንተዘይትእትዎም ከመይ ጌርካ ምገበርካዮ?

- ካብ ታይፕስክሪፕት ብ Webpack + SystemJS + Babel combo ተጠቂመ ትራንስፓይል ምገበርኩሉ።

ታይፕስክሪፕት? ብጃቫስክሪፕት ኮድ ንገብር ዘለና መሲሉኒ ነይሩ!

-ታይፕስክሪፕት ጃቫስክሪፕት ወይ ዝሓሸ ኣዘራርባ ሱፐርሴት ናይ ጃቫስክሪፕት እዩ፣ ብፍላይ ድማ ጃቫስክሪፕት ኣብ ስሪት ES6 እዩ። ትፈልጥ ዲኻ፡ እታ ቅድሚ ሕጂ ዝዛረብናያ ሻድሻይ ስሪት?

ES2016+ ድሮ ሱፐርሴት ናይ ES6 ኮይኑ ተሰሚዑኒ! ሕጂ እዚ ታይፕስክሪፕት ዝበሃል ነገር ስለምንታይ እዩ ዘድልየና?

- ኣየ፡ ምኽንያቱ ጃቫስክሪፕት ከም ዝተጻሕፈ ቋንቋ ክንጥቀመሉ ስለዘኽእለና፡ ከምኡ’ውን ኣብ ግዜ ምዝዋር ጌጋታት ክንቅንስ ስለዘኽእለና። 2016 እዩ፣ ኣብ ኮድ ጃቫስክሪፕትካ ገለ ዓይነታት ክትውስኽ ይግባእ።

ታይፕስክሪፕት ድማ ከምኡ ከም ዝገብር ርዱእ እዩ።

-Flow ከምኡ ውን ዋላ እኳ ታይፕስክሪፕት ክጥርነፍ ዘለዎ ሱፐርሴት ናይ ጃቫስክሪፕት ክኸውን ከሎ ምጽሓፍ ጥራይ ይምርምር።

ስግ... ፍሎው ድማ ድዩ?

- ብገለ ደቂ ተባዕትዮ ኣብ ፌስቡክ ዝሰርሕዎ ስታቲክ ታይፕ ቸከር እዩ። ኣብ OCaml ኮድ ገይሮምሉ፣ ምኽንያቱ ፋንክሽናል ፕሮግራሚንግ ኣዝዩ ዘደንቕ እዩ።

OCaml? ተግባራዊ ፕሮግራሚንግ?

- ኣብዚ ግዜ እዚ እቶም ዝሑላት ቆልዑ ዝጥቀሙሉ እዩ ሰብኣይ ትፈልጥ ዲኻ 2016? ተግባራዊ ፕሮግራሚንግ? ልዑል ደረጃ ዘለዎም ተግባራት? ካሪ ምግባር? ጽሩያት ተግባራት?

ሕጂ እንታይ ከም ዝበልካ ሓሳብ የብለይን።

- ኣብ መጀመርታ ዝገብሮ የለን። ርኣዩ፡ ካብ OOP ፋንክሽናል ፕሮግራሚንግ ከም ዝሓይሽ ክትፈልጥ ጥራይ እዩ ዘድልየካ፡ ኣብ 2016 ድማ ንሱ እዩ ክንጥቀመሉ ዝግበኣና።

ጽናሕ ኣብ ኮለጅ OOP ተማሂረ፡ ጽቡቕ መሲሉኒ?

- ጃቫ ቅድሚ ብኦራክል ምዕዳጋ እውን ከምኡ። ማለተይ፡ OOP ኣብቲ ግዜ እቲ ጽቡቕ ነይሩ፡ ሎሚ እውን ኣጠቓቕምኡ ኣለዎ፡ ሕጂ ግን ኩሉ ሰብ ምምሕያሽ ኩነታት ምስ ምህራም ዕሸላት ማዕረ ምዃኑ ይግንዘብ ኣሎ፡ ስለዚ ሕጂ ኩሉ ሰብ ናብ ዘይቅየር ነገራትን ተግባራዊ ፕሮግራሚንግን ይሰጋገር ኣሎ። ደቂ ሃስከል ንዓመታት ክጽውዕዎ ጸኒሖም እዮም፣ -ምስ ደቂ ኤልም ድማ ኣይትጀምሩኒ- ግን ዕድል ኮይኑ ኣብ መርበብ ሓበሬታ ሕጂ ከም ራምዳ ዝኣመሰሉ ቤተ-መጻሕፍቲ ኣለዉና፣ እዚኦም ድማ ብግልጺ ጃቫስክሪፕት ተግባራዊ ፕሮግራሚንግ ክንጥቀም ዘኽእሉና እዮም።

ንዕኡ ኢልካ ጥራይ ዲኻ ኣስማት ትድርቢ ዘለኻ? እንታይ ድኣ ራምንዳ?

-አይኮንን። ራምዳ። ከም ላምብዳ። ትፈልጥ ዲኻ፡ እቲ ቤተ መጻሕፍቲ ዴቪድ ቻምበርስ?

ዳዊት መን?

- ዴቪድ ቻምበርስ። ዝሑል ወዲ። ረሳሕ ናይ ዕልዋ ጸወታ ይጻወት። ሓደ ካብቶም ንራምዳ ኣበርከትቲ። ፋንክሽናል ፕሮግራሚንግ ንምምሃር ዕቱብ እንተኾንካ እውን ንኤሪክ ሜይጀር ክትምርምሮ ይግባእ።

ኤሪክ መይጀር ድማ...?

-ተግባራዊ ፕሮግራሚንግ ወዲ ከምኡ። ኣገራሚ ወዲ። ነዛ ጓና ሕብራዊት ማልያ እናተጠቐመ ንኣጂል ኣብ ጓሓፍ ዝድርብየሉ ዕስለ ኣቀራርባታት ኣለዎ። ገለ ካብቲ ንብረት ካብ Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

እሺ። ኣብኡ ደው ከብለካ እየ። እዚ ኩሉ ጽቡቕን ጽቡቕን እዩ፡ እዚ ኩሉ ግን በቃ ኣዝዩ ዝተሓላለኸን ንዳታ ንምምጻእን ንምቕራብን ጥራይ ዘየድሊ ኮይኑ ይስመዓኒ። ዳይናሚክ ዳታ ዘለዎ ሰደቓ ንምፍጣር ነዞም ሰባት ምፍላጥ ወይ ነቶም ኩሎም ነገራት ምምሃር ከምዘየድልየኒ ርግጸኛ እየ። ናብ React ንመለስ። ከመይ ጌረ ብ React ካብ ሰርቨር ዳታ ክወስዶ ይኽእል?

- ጽቡቕ፡ ብሓቂ ነቲ ዳታ ብ React ኣይትምጽኦን ኢኻ፡ ነቲ ዳታ ብ React ጥራይ ኢኻ እተቕርቦ።

ኣንታ ርግምቲ ንዓይ። ስለዚ እቲ ዳታ ንምምጻእ እንታይ ትጥቀም?

- ካብቲ ሰርቨር ዳታ ንምምጻእ Fetch ትጥቀም።

ይሓዝን፧ ነቲ ዳታ ንምምጻእ Fetch ትጥቀም? ነቶም ነገራት ዝሰምዮም ዘሎ ሰብ ቴሳውረስ የድልዮ።

- ሓቀይ ይፈልጥ እየ? ንሱ ስም ናይቲ ተወላዲ ኣተገባብራ እዩ ንXMLHttpRequests ኣንጻር ሓደ ኣገልጋሊ ንምፍጻም ኣምጽኦ።

ኣየ ስለዚ ኣጃክስ።

-AJAX ናይ XMLHttpRequests ምጥቃም ጥራይ እዩ። ግን ርግጸኛ እየ። Fetch ኣብ መብጽዓታት ዝተመርኮሰ AJAX ክትገብር የኽእለካ፡ እዚ ድማ ድሕሪኡ ካብቲ callback hell ንምውጋድ ክትፈትሖ ትኽእል።

ምምላስ ጻውዒት ሲኦል?

-እወ። ኣብ ነፍሲ ወከፍ ኣንጻር እቲ ሰርቨር ኣሲንክሮናዊ ሕቶ ኣብ እትፍጽመሉ እዋን፡ መልሱ ክትጽበ ኣለካ፡ እዚ ድማ ድሕሪኡ ኣብ ውሽጢ ሓደ ፋንክሽን ፋንክሽን ክትውስኽ ይገብረካ፡ እዚ ድማ ካብ ሲኦል ዝመጽእ ፒራሚድ ምምላስ ጻውዒት ይበሃል።

ኣየ ሕራይ። እዚ ናይ መብጽዓ ነገር ድማ ይፈትሖ?

-ብርግፀኝነት። ብመብጽዓታት ኣቢልካ ንዝግበር ምምላስ ጻውዒትካ ብምትዕጽጻፍ፡ ብቐሊሉ ንምርዳእ ኮድ ክትጽሕፍ፡ ከተላግጸሉን ክትፍትኖን፡ ከምኡ’ውን ብሓንሳብ ብሓንሳብ ሕቶታት ክትፍጽምን ኩሎም ክሳብ ዝጽዓኑ ክትጽበን ትኽእል።

ከምኡ ድማ ብፌች ክግበር ይኽእል ድዩ?

- እወ ግን ተጠቃሚኻ evergreen browser ዝጥቀም እንተኾይኑ ጥራይ እዩ፡ እንተዘይኮይኑ Fetch polyfill ከተካትት ወይ Request, Bluebird ወይ Axios ክትጥቀም ኣለካ።

ክንደይ ቤተ መጻሕፍቲ ክፈልጥ ኣለኒ ንኣምላኽ ክብል? ክንደይ እዮም ካብኣቶም?

- ጃቫስክሪፕት እዩ። ኩለን ሓደ ዓይነት ስራሕ ዝሰርሓ ኣሽሓት ቤተ መጻሕፍቲ ክህልዋ ኣለወን። ቤተ-መጻሕፍቲ ንፈልጥ ኢና፡ ብሓቂ ብሉጻት ቤተ-መጻሕፍቲ ኣለዉና። ቤተ መጻሕፍትና huuuge እዩ፡ ሓደ ሓደ ግዜ ድማ ስእልታት ጋይ ፊየሪ ነካትት ኢና።

ጋይ ፊየሪ ጥራይ ዲኻ ኢልካ? እዚ ንውዳእ። እዞም ብሉበርድ፡ ሪክዌስት፡ ኣክሲዮስ ዝብሉ ቤተ-መጻሕፍቲ እንታይ ይገብሩ?

-መብጽዓታት ዝመልሱ XMLHttpRequests ንምፍጻም ዝሕግዙ ቤተ-መጻሕፍቲ እዮም።

ናይ jQuery AJAX ሜላ ውን መብጽዓታት ክመልስ ኣይጀመረን ድዩ?

- ድሕሪ ሕጂ ኣብ 2016 “ጀ” ዝብል ቃል ኣይንጥቀምን ኢና። Fetch ጥራይ ተጠቐም፣ ኣብ መርበብ ሓበሬታ ኣብ ዘይብሉ እዋን ድማ polyfill ግበሮ ወይ ኣብ ክንድኡ Bluebird, Request ወይ Axios ተጠቐም። ድሕሪኡ ነቲ መብጽዓ ምስ await ኣብ ውሽጢ async function and boom ኣመሓድሮ፣ ግቡእ ቁጽጽር ዋሕዚ ኣለካ።

ንሳልሳይ ግዜ እዩ ተጸበዩ ዝጠቐስካዮ ግን እንታይ ምዃኑ ሓሳብ የብለይን።

-Await ንሓደ ኣሲንክሮናዊ ጻውዒት ክትዓግቶ የኽእለካ፣ እዚ ድማ እቲ ዳታ መዓስ ከም ዝመጽእ ዝሓሸ ቁጽጽር ክህልወካን ብሓፈሻ ንባብ ኮድ ክውስኽን የኽእለካ። ኣዝዩ ዘደንቕ እዩ፣ ኣብ ባቤል ነቲ ናይ ደረጃ-3 ቅድመ-ምድላው ከም እትውስኽ ጥራይ ከተረጋግጽ ኣለካ፣ ወይ ድማ syntax-async-functionsን transform-async-to-generator pluginን ክትጥቀም ኣለካ።

እዚ ዕብዳን እዩ።

- ኣይፋልን ዕብዳን እዩ እቲ ሓቂ ታይፕስክሪፕት ኮድ ቅድመ-ምትእኽኻብ ድሕሪኡ ምስ ባቤል ትራንስፓይል ጌርካ await ክትጥቀመሉ ኣለካ።

ዋት? ኣብ ታይፕስክሪፕት ኣይተኻተተን?

- ኣብ ዝቕጽል ስሪት ይገብር፡ ካብ ስሪት 1.7 ግን ንES6 ጥራይ እዩ ዒላማ ዝገበረ፡ ስለዚ ኣብቲ መርበብ ሓበሬታ await ክትጥቀም እንተደሊኻ፡ መጀመርታ ንES6 ዕላማ ዝገበረ ታይፕስክሪፕት ኮድካ ከተዋህልል ኣለካ፡ ድሕሪኡ ድማ Babel that shit up to target ES5 ክትሰርሕ ኣለካ።

ኣብዚ እዋን እዚ እንታይ ከም ዝብል ኣይፈልጥን እየ።

- ርኣዩ ቀሊል እዩ። ኩሉ ብታይፕስክሪፕት ኮድ ግበር። ኩሎም Fetch ዝጥቀሙ ሞዱላት ንES6 ዕላማ ንምግባር የጠቓልልዎም፣ ብBabel ኣብ stage-3 preset ይትርፍይዎም፣ ብ SystemJS ድማ ይጽዕኑ። Fetch እንተዘይብልካ፡ polyfill ግበሮ፡ ወይ Bluebird, Request ወይ Axios ተጠቐም፡ ኩሉ መብጽዓታትካ ድማ ብ await ኣተሓሕዞ።

ናይ ቀሊል ኣዝዩ ዝተፈላለየ ትርጉማት ኣለና። ስለዚ፡ በቲ ስርዓት ኣብ መወዳእታ ነቲ ዳታ ኣምጺአዮ ሕጂ ድማ ብሪኣክት ከርእዮ ይኽእል እየ ሓቀይ?

- መመልከቲኹም ዝኾነ ይኹን ናይ ግዝኣት ለውጢ ክሕዝ ድዩ?

ስሕተት ኣነ ከምኡ ኣይመስለንን። እቲ ዳታ ምርኣይ ጥራይ እዩ ዘድልየኒ።

- ኣንታ ኣምላኽ ይመስገን። እንተዘይኮይኑ Flux, ከምኡ ውን ከም Flummox, Alt, Fluxible ዝኣመሰሉ ኣተገባብራታት ክገልጸልኩም ምተገደድኩ። ዋላ እኳ ሓቂ ንምዝራብ Redux ክትጥቀም ይግባእ ።

ኣብ ልዕሊ እቶም ኣስማት ጥራይ ክነፍር እየ። ሕጂ ውን ዳታ ምርኣይ ጥራይ እዩ ዘድልየኒ።

- ኣየ፡ ንመጀመርታ ግዜ ሪኣክት ዘየድልየካ ዳታ ጥራይ ኢኻ እተርኢ እንተኾንካ። ሞተር ቴምፕላቲንግ እንተዝህልወካ ጽቡቕ ምሃለኻ።

ትላገጸለይ ዲኻ? እዚ መስሓቕ ድዩ ትብሉ? ንእትፈትዎም ሰባት ከምኡ ዲኻ ትሕዞም፧

- እንታይ ክትጥቀም ከም እትኽእል ጥራይ እየ ዝገልጽ ነይረ።

ጠጠው በል። ደው ምባል ጥራይ።

- ማለተይ ዋላ templating engine ጥራይ ምጥቃም እንተኾነ ኣነ ንስኻ እንተዝኸውን ገና Typescript + SystemJS + Babel combo ምተጠቐምኩ።

ኣብ ሓደ ገጽ ዳታ ምርኣይ የድልየኒ እምበር ናይ Sub Zero original MK fatality ምፍጻም የድልየኒ። እንታይ ዓይነት templating engine ክጥቀም ከም ዘለኒ ጥራይ ንገረኒ ካብኡ ክወስዶ እየ።

- ብዙሕ ኣሎ፡ ኣየናይ ትፈልጦ?

ኡፍ ስም ክዝክሮ ኣይክእልን እየ። ቅድሚ ነዊሕ እዋን እዩ ነይሩ።

-jቅጥዕታት? jQote? ፅሩይ፧

Err, ደወል ኣይድውልን እዩ። ካልእ?

- ግሉጽነት? JSRender? ማርካፕጀስ? ኖክኣውትጀስ? እቲ ሓደ ክልተኣዊ መእሰሪ ነይርዎ።

ካልእ?

-ፕሌትስጀስ? jሕቶ-tmpl? መትሓዚታት? ገለ ሰባት ክሳብ ሕጂ ይጥቀሙሉ።

ምናልባት። ምስታ ናይ መወዳእታ ዝመሳሰሉ ኣለዉ ድዮም?

- ጭሕሚ፡ ስርዝ ድልዝ? ሕጂ ዋላ lodash ሓደ ኣለዎ ይመስለኒ ሓቂ ንምዝራብ፡ ግን እቶም ዓይነት 2014 እዮም።

ስሕተት.. ምናልባት ሓድሽ ነይሩ ክኸውን ይኽእል እዩ።

- ጄድ? ዳስትጀስ?

አይኮንን።

-ዶትጀስ? ኢ.ጀይ.ኤስ?

አይኮንን።

-ኑንጁክስ? ኢሲቲ?

አይኮንን።

-ማህ፡ ብዝኾነ Coffeescript syntax ዝፈቱ የለን። ጄድ?

ኣይፋልን ድሮ ጄድ ኢልካዮ ኣለኻ።

- ፑግ ማለተይ እየ። ጄድ ማለተይ እየ። ማለተይ ጄድ ሕጂ ፓግ ኮይኑ ኣሎ።

ብዓብዩ ምትንፋስ። ኣይፋልን ክዝክር ኣይክእልን እየ። ኣየነይቲ ምተጠቐምካ?

-ምናልባት ES6 ተወላዲ ቅጥዒ ሕብረ-ቁጽሪ ጥራይ።

እስከ ክግምት። እዚ ድማ ES6 ይሓትት።

-ልክዕ።

ኣየናይ፣ ከከምቲ ዝጥቀመሉ ዘለኹ መርበብ ሓበሬታ ባቤል የድልዮ።

-ልክዕ።

ንሱ ድማ፡ ምሉእ እቲ ቀንዲ ቤተ-መጻሕፍቲ ከይወሰኽኩ ከእትዎ እንተደልየ፡ ከም ሞዱል ካብ npm ክጽዕኖ ኣለኒ።

-ልክዕ።

ኣየናይ፣ Browserify፣ ወይ Wepback፣ ወይ ድማ ብዓቢኡ እቲ ካልእ SystemJS ዝበሃል ነገር የድልዮ።

-ልክዕ።

ኣየናይ ድማ፡ Webpack እንተዘይኮይኑ፡ ብዝበለጸ ብናይ ዕማም ጎያዪ ክመሓደር ኣለዎ።

-ልክዕ።

ግን፡ ፋንክሽናል ፕሮግራሚንግን ታይፕድ ላንጋዋጅን ክጥቀም ስለ ዝግበኣኒ መጀመርታ ታይፕስክሪፕት ቅድመ-ምጥርናፍ ወይ ነዚ Flow thingy ክውስኽ ኣለኒ።

-ልክዕ።

ደሓር ከኣ wait ክጥቀም እንተደልየ ናብ ባቤል ስደዶ።

-ልክዕ።

ስለዚ ድሕሪኡ Fetch, promises, and control flowን ኩሉ እቲ ማጂክን ክጥቀም እኽእል እየ።

- በቃ ፌች ፖሊፊል ምግባር ኣይትረስዑ እንተዘይተደጊፉ፡ ሳፋሪ ሕጂ ውን ክሕዞ ኣይክእልን እዩ።

እንታይ ትፈልጥ ኢኻ። ኣብዚ ተወዲእና ኣለና ይመስለኒ። ብሓቂ ንምዝራብ ዝወዳእኩ ይመስለኒ። ምስ ዌብ ወዲአዮ፣ ብጃቫስክሪፕት ጠቕሊለ ወዲአዮ።

- ጽቡቕ እዩ፡ ድሕሪ ቁሩብ ዓመታት ኩላትና ኣብ Elm ወይ WebAssembly ኮድ ክንገብር ኢና።

ናብ ድሕሪት ጥራይ እየ ክምለስ። በቃ ነዞም ብዙሓት ለውጥታትን ስሪትን ሕታማትን ኣከባበርትን ትራንስፓይለራትን ክሕዞም ኣይክእልን እየ። ማሕበረሰብ ጃቫስክሪፕት ዝኾነ ሰብ ነዚ ክኸይድ ይኽእል እዩ ኢሉ እንተሓሲቡ ዕብዳን እዩ።

- ይሰምዓካ ኣለኹ። ሽዑ ንማሕበረሰብ ፓይቶን ክትፍትን ይግባእ።

ንምንታይ፧

- ብዛዕባ ፓይቶን 3 ሰሚዕኩም ትፈልጡ ዶ?

Update: ንናይ ምጽሓፍ ጌጋታትን ጌጋታትን ስለ ዘመልከትኩም የቐንየልና፡ ከምቲ ዝተጠቕሰ ነቲ ጽሑፍ ከሐድሶ እየ። ዘተ ኣብ ሃከርኒውስን ሬዲትን .