একক পৃষ্ঠার জাভাস্ক্রিপ্ট ওয়েব অ্যাপ্লিকেশনটির আর্কিটেকচার?


99

কীভাবে জটিল একক পৃষ্ঠার জেএস ওয়েব অ্যাপ্লিকেশনটিকে ক্লায়েন্ট-সাইডে গঠন করা উচিত? বিশেষত আমি কীভাবে অ্যাপ্লিকেশনটির মডেল অবজেক্টস, ইউআই উপাদানগুলি, যে কোনও নিয়ামক এবং সার্ভারের অধ্যবসায় পরিচালিত অবজেক্টের ক্ষেত্রে পরিষ্কারভাবে কাঠামো তৈরি করতে পারি সে সম্পর্কে আগ্রহী।

এমভিসি প্রথমে ফিটের মতো মনে হয়েছিল। তবে ইউআই উপাদানগুলি বিভিন্ন গভীরতায় বাসা বেঁধেছে (প্রতিটি তাদের নিজস্ব আচরণের সাথে মডেল ডেটার উপর প্রতিক্রিয়া / প্রতিক্রিয়া দেখায় এবং প্রতিটি উত্পন্ন ইভেন্ট যা তারা নিজেরাই করতে পারে বা সরাসরি পরিচালনা করতে পারে না), এমভিসি পরিষ্কারভাবে প্রয়োগ করা যেতে পারে বলে মনে হয় না। (তবে যদি বিষয়টি না হয় তবে দয়া করে আমাকে সংশোধন করুন))

-

( এই প্রশ্নের ফলে অজ্যাক্স ব্যবহারের দুটি পরামর্শের ফলস্বরূপ, যা সম্ভবত অতি তুচ্ছ এক পৃষ্ঠার অ্যাপ্লিকেশন ব্যতীত অন্য যে কোনও কিছুর জন্য অবশ্যই প্রয়োজন))



4
আপনি এই প্রশ্নের জন্য আপনার নিজের অন্তর্দৃষ্টি প্রদান করতে পারেন? আপনি যখন এই প্রশ্নটি জিজ্ঞাসা করেছেন তখন এটি হয়ে গেছে এবং জাভাস্ক্রিপ্ট এসপিএগুলির সাথে আপনার নিজের অভিজ্ঞতা থেকে আপনি সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলি কী শিখলেন তা জানতে আগ্রহী।
এড্রিয়ান মোইসা

উত্তর:


35

পিওএমএমসি / জেএসের এমভিসি আর্কিটেকচার হ'ল সবচেয়ে মার্জিত আইএমও। আমি এটি থেকে অনেক কিছু শিখেছি। আমি নিকোলাস জাকাসের স্কেলযোগ্য জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন আর্কিটেকচারটি ক্লায়েন্টের পার্শ্ব আর্কিটেকচার বিকল্পগুলি গবেষণায় সহায়ক বলে মনে করেছি।

আরও দুটি টিপস

  1. আমি ভিউ, ফোকাস এবং ইনপুট ম্যানেজমেন্টটি এমন ক্ষেত্রগুলির মধ্যে পেয়েছি যাতে একক পৃষ্ঠার ওয়েব অ্যাপ্লিকেশনে বিশেষ মনোযোগ দেওয়া দরকার
  2. জেএস লাইব্রেরিটি বিমূর্ত করা, আপনি কী ব্যবহার করেন সে সম্পর্কে মন পরিবর্তন করার জন্য দরজা উন্মুক্ত রেখে, বা মিশ্রণ ও মিলের প্রয়োজন দেখা দেওয়ার পরেও আমি সহায়ক বলে মনে করেছি।

13

ডিন দ্বারা ভাগ করা হিসাবে নিকোলাস জাকাসের উপস্থাপনাটি শুরু করার জন্য খুব ভাল জায়গা। আমিও কিছুক্ষণ একই প্রশ্নের উত্তর দেওয়ার জন্য লড়াই করে যাচ্ছিলাম। বেশ কয়েকটি বড় আকারের জাভাস্ক্রিপ্ট পণ্য তৈরি করার পরে, কারওর প্রয়োজন পড়লে রেফারেন্সটিকে আর্কিটেকচার হিসাবে ভাগ করে নেওয়ার চিন্তাভাবনা করে। একটু দেখো:

http://boilerplatejs.org/

এটি জাভাস্ক্রিপ্ট বিকাশের সাধারণ উদ্বেগ যেমন:

  • সমাধান কাঠামো
  • জটিল মডিউল শ্রেণিবিন্যাস তৈরি করা হচ্ছে
  • স্ব-র মধ্যে ইউআই উপাদান রয়েছে
  • ইভেন্ট ভিত্তিক আন্তঃ মডিউল যোগাযোগ
  • রাউটিং, ইতিহাস, বুকমার্কিং
  • অংশ পরিক্ষাকরণ
  • স্থানীয়করণ
  • নথি জেনারেশন

ইত্যাদি


10

আমি যেভাবে অ্যাপ্লিকেশনগুলি তৈরি করি:

  • ExtJS ফ্রেমওয়ার্ক, একক পৃষ্ঠার অ্যাপ্লিকেশন, চাহিদা অনুযায়ী লোড হওয়া পৃথক জেএস ফাইলে সংজ্ঞায়িত প্রতিটি উপাদান
  • প্রতিটি উপাদান তার নিজস্ব ডেডিকেটেড ওয়েব পরিষেবায় (কখনও কখনও একাধিক) যোগাযোগ করে, এক্সট্রাএস স্টোরগুলিতে বা বিশেষ উদ্দেশ্যে ডেটা স্ট্রাকচারে ডেটা আনছে ching
  • রেন্ডারিংটিতে স্ট্যান্ডার্ড এক্সজেজেএস উপাদান ব্যবহার করা হয়, তাই আমি গ্রিডগুলিতে স্টোরগুলিকে আবদ্ধ করতে পারি, রেকর্ড থেকে ফর্মগুলি লোড করতে পারি ...

কেবল একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক চয়ন করুন এবং এর সেরা অনুশীলনগুলি অনুসরণ করুন। আমার প্রিয়গুলি এক্সট্রিজএস এবং জিডাব্লুটিটি তবে ওয়াইএমএমভি।

এটির জন্য নিজের সমাধানটি রোল করবেন না। আধুনিক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি যা করে তা নকল করার জন্য প্রয়োজনীয় প্রচেষ্টাটি খুব বড়। স্ক্র্যাচ থেকে এগুলি তৈরি করার চেয়ে বিদ্যমান যে কোনও কিছু মানিয়ে নেওয়া সবসময় দ্রুত।


10
Question - What makes an application complex ? 

উত্তর - প্রশ্নটিতেই 'জটিল' শব্দের ব্যবহার। অতএব, একটি সাধারণ প্রবণতা শুরু থেকেই একটি জটিল সমাধান সন্ধান করা হবে।

Question - What does the word complex means ?

উত্তর - অজানা বা আংশিকভাবে বোঝা যায় এমন কিছু। উদাহরণ: গ্রেভিটির তত্ত্বটি আজও আমার কাছে কমপ্লেক্স তবে স্যার আইজাক নিউটনের কাছে নয় যিনি এটি 1655 সালে আবিষ্কার করেছিলেন।

Question - What tools can I use to deal with complexity ?

উত্তর - বোঝা এবং সরলতা simp

Question - But I understand my application . Its still complex ?

উত্তর - দু'বার ভাবুন, কারণ বোঝার এবং জটিলতার সহাবস্থান নেই। আপনি যদি একটি বিশাল বিশাল অ্যাপ্লিকেশন বুঝতে পারেন তবে আমি নিশ্চিত যে আপনি একমত হবেন যে এটি ছোট এবং সাধারণ ইউনিটের একীকরণ ছাড়া কিছুই নয়।

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

উত্তর - কারণ,

-> এসপিএ কোনও ধরণের মূল প্রযুক্তি নয় যা নতুনভাবে উদ্ভাবিত হয়েছিল যার জন্য আমাদের প্রয়োগের বিকাশে যা করা হচ্ছে তার অনেকগুলি জিনিসগুলির জন্য আমাদের চাকাটিকে পুনরায় উদ্ভাবন করতে হবে।

-> এটি উন্নত কর্মক্ষমতা, প্রাপ্যতা, স্কেলাবিলিটি এবং ওয়েব অ্যাপ্লিকেশনগুলির রক্ষণাবেক্ষণের প্রয়োজন দ্বারা চালিত একটি ধারণা।

-> এটি মোটামুটি নতুনভাবে চিহ্নিত নকশার ধরণ, সুতরাং একটি ডিজাইনের ধরণ হিসাবে এসপিএর উপলব্ধি একটি এসপিএর আর্কিটেকচার সম্পর্কে অবহিত সিদ্ধান্ত গ্রহণে অনেক বেশি এগিয়ে যায়।

-> মূল স্তরে কোনও এসপিএ জটিল নয়, কারণ কোনও অ্যাপ্লিকেশন এবং এসপিএ প্যাটার্নের প্রয়োজনীয়তা বোঝার পরে আপনি বুঝতে পারবেন যে আপনি এখনও কোনও অ্যাপ্লিকেশন তৈরি করছেন, কিছুটা পরিবর্তন এবং পুনরায় ব্যবস্থাপনার আগে আপনি যেমন করেছিলেন তেমনই উন্নয়ন পদ্ধতির মধ্যে।

Question - What about the use of Frameworks ?

উত্তর - ফ্রেমওয়ার্কগুলি কিছু সাধারণভাবে চিহ্নিত এবং জেনেরিক নিদর্শনগুলির জন্য বয়লার প্লেট কোড / সমাধান, সুতরাং তারা x% (পরিবর্তনশীল, প্রয়োগের ভিত্তিতে) অ্যাপ্লিকেশন বিকাশ থেকে লোড নিতে পারে তবে বিশেষ করে ভারী হওয়ার জন্য তাদের থেকে খুব বেশি কিছু আশা করা উচিত নয় them এবং ক্রমবর্ধমান অ্যাপ্লিকেশন। আপনার অ্যাপ্লিকেশন কাঠামো এবং প্রবাহের সম্পূর্ণ নিয়ন্ত্রণে রাখা এটি সর্বদা একটি ভাল ক্ষেত্রে তবে সবচেয়ে গুরুত্বপূর্ণ এটির জন্য কোড। অ্যাপ্লিকেশন কোডে কোনও ধূসর বা কালো অঞ্চল থাকতে হবে না।

Question - Can you suggest one of the many approaches to SPA architecture ?

উত্তর - আপনার আবেদনের প্রকৃতির উপর ভিত্তি করে আপনার নিজস্ব কাঠামোর কথা চিন্তা করুন। অ্যাপ্লিকেশন উপাদান শ্রেণীবদ্ধ। আপনার উত্পন্ন কাঠামোর নিকটবর্তী একটি বিদ্যমান কাঠামোটির সন্ধান করুন, যদি আপনি এটি খুঁজে পান তবে এটি ব্যবহার করুন, যদি আপনি এটি খুঁজে না পান তবে আমি আপনাকে নিজের সাথে এগিয়ে যাওয়ার পরামর্শ দিই। কাঠামো তৈরি করা বেশ প্রচেষ্টা অবলম্বন তবে দীর্ঘমেয়াদে আরও ভাল ফলাফল দেয়। আমার এসপিএ কাঠামোর কিছু বেসিক উপাদানগুলি হ'ল:

  • ডেটা উত্স: মডেলগুলি / মডেলগুলির সংগ্রহ

  • তথ্য উপস্থাপনের জন্য চিহ্নিত করুন: টেমপ্লেটস

  • অ্যাপ্লিকেশনটির সাথে ইন্টারঅ্যাকশন: ইভেন্টগুলি

  • রাজ্য ক্যাপচারিং এবং নেভিগেশন: রাউটিং

  • ইউটিলিটিস, উইজেট এবং প্লাগইনগুলি: গ্রন্থাগারগুলি

এটি যদি আপনার এসপিএ আর্কিটেকচারের সাথে কোনও উপায়ে এবং সৌভাগ্য কামনা করে তবে আমাকে জানান!


4
এটি কিছু দুর্দান্ত দৃষ্টিকোণ যোগ করে (এটি সাধারণত বিরল)। ধন্যবাদ!
কোডি



1

আমি বর্তমানে যে ওয়েব অ্যাপ্লিকেশনটিতে কাজ করছি সেগুলিতে JQuery ব্যবহার করা হয় এবং আমি এটি কোনও বড় একক পৃষ্ঠার ওয়েব অ্যাপ্লিকেশনটির জন্য সুপারিশ করব না। বেশিরভাগ ফ্রেমওয়ার্কগুলি যেমন ডোজো, ইয়াহু, গুগল এবং অন্যরা তাদের লাইব্রেরিতে নেমস্পেস ব্যবহার করে তবে জিকুয়েরি তা দেয় না এবং এটি একটি উল্লেখযোগ্য ব্যর্থতা।

যদি আপনার ওয়েবসাইটটি ছোট হওয়ার ইচ্ছা থাকে তবে জ্যাকুয়ারি ঠিক আছে তবে আপনি যদি একটি বৃহত সাইট তৈরি করতে চান তবে আমি উপলব্ধ সমস্ত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক দেখে এবং কোনটি আপনার চাহিদা পূরণ করে তা সিদ্ধান্ত নেওয়ার পরামর্শ দিচ্ছি।

এবং আমি আপনার জাভাস্ক্রিপ্ট / এইচটিএমএলতে এমভিসি প্যাটার্নটি প্রয়োগ করার পরামর্শ দিচ্ছি এবং সম্ভবত জাভাস্ক্রিপ্টের জন্য আপনার বেশিরভাগ অবজেক্ট মডেলটি জেএসন হিসাবে করা যেতে পারে যা আপনি প্রকৃতপক্ষে অ্যাজাক্সের মাধ্যমে সার্ভার থেকে ফিরে আসেন এবং জাভাস্ক্রিপ্ট এইচটিএমএল রেন্ডার করতে json ব্যবহার করে।

আমি আজাক্স বইটি ক্রিয়াতে পড়ার পরামর্শ দেব কারণ এটি আপনার জানা প্রয়োজন এমন বেশিরভাগ উপাদানকে কভার করে।


প্রোটোটাইপ ব্যবহার করে jQuery একটি নামের গতিতে (কোনও জেএসের মতো) লেখা যেতে পারে। আমি নিশ্চিত নই যে এটি কোনও কাঠামোর পিছনে বিমূর্তকরণের ওয়ারেন্ট দেওয়ার পক্ষে একটি বৃহত বা অস্পষ্ট যথেষ্ট বৈশিষ্ট্য - আমি জেএস আসলে কী করছে তা শিখতে পছন্দ করি। stackoverflow.com/questions/881515/...
SimplGy

4
JQuery ক্লায়েন্টের পাশের অ্যাপ্লিকেশন ফ্রেমওয়ার্ক হিসাবে নয়। এটি তার চেয়ে "নিম্ন-স্তরের" লক্ষ্যবস্তু রয়েছে। জকিউরি হ'ল এইচটিএমএল ডকুমেন্টের ট্রভারসিং, ইভেন্ট হ্যান্ডলিং, অ্যানিমেটিং এবং অ্যাজাক্স ক্রিয়াকলাপকে সহজ করার জন্য এবং ব্রাউজারগুলির মধ্যে পার্থক্যগুলি বিমূর্ত করার জন্য নকশাকৃত। বৃহত্তর অ্যাপ্লিকেশনগুলির জন্য আপনার কোনও ক্লায়েন্ট সাইড অ্যাপ্লিকেশন কাঠামো যেমন JQuery এর সাথে নকআউট বা ব্যাকবোন ব্যবহার করা উচিত।
স্যাম শাইলস

সুতরাং আমার বক্তব্যটি এখনও যদি দাঁড়িয়ে থাকে তবে যদি নকআউট বা ব্যাকবোনটি অন্তর্ভুক্ত না হয়, ডকুমেন্ট ট্র্যাভারসিং, ইভেন্ট হ্যান্ডলিং ইত্যাদি তবে খুব বেশি মূল্য নেই। YUI3 অ্যাপ্লিকেশন ফ্রেমওয়ার্কটি করে এবং আপনি যদি এটি ব্যবহার করেন তবে JQuery এর কোনও প্রয়োজন নেই।
agগলস্টর্ম

4
jquery এর সমস্ত পদ্ধতি jQuery ভেরিয়েবল এবং $ ভেরিয়েবলের মধ্যে সংরক্ষণ করে। আপনি যদি কোনও বিরোধের বিকল্পটি ব্যবহার করেন তবে কেবল jQuery নামটি বিশ্বব্যাপী নেমস্পেসে তৈরি করা হবে। jQuery একটি ফ্রেমওয়ার্ক নয়, কেবল একটি লাইব্রেরি নয়, এটি আপনাকে কীভাবে কীভাবে করতে হয় তা কিছু বলে না, কিছু সাধারণ জিনিস করার জন্য কিছু শর্টকাট দেয়। ডোজো / ওয়াইউআই ইত্যাদির সাথে jQuery তুলনা করা ভুল।
হফম্যান

4
@ আইগলস্টর্ম আপনার যদি বিবৃতিটি মিথ্যা মূল্যায়ন করে।
জন লেহম্যান




0

বিকল্প: ইজনাট এ একবার দেখুন

জাভা স্ক্রিপ্টে ভাবেন তবে জাভাতে একই ডিওএম এপিআই সহ সার্ভারে কোড কোড করুন, সার্ভারে কাস্টম ক্লায়েন্ট / ব্রিজ ছাড়াই আপনার অ্যাপ্লিকেশন পরিচালনা করা সহজ কারণ ইউআই এবং ডেটা একসাথে রয়েছে।



0

নিকা ফ্রেমওয়ার্ক আপনাকে একক পৃষ্ঠার অ্যাপ্লিকেশন তৈরি করতে দেয়। আপনাকেপৃথক ফাইলে এইচটিএমএল , সিএসএস ( এসএএসএস ), জাভাস্ক্রিপ্ট লিখতে এবং শেষ পর্যন্ত কেবলমাত্র একটি আউটপুট ফাইলে তাদের বান্ডিল করতে দেয়।


0

আমি ইয়েমেন অন্বেষণ করার পরামর্শ দেব । এটি আপনাকে আপনার নতুন প্রকল্পের জন্য বিদ্যমান "সেরা অনুশীলন" ব্যবহার করার অনুমতি দেয়।

উদাহরণ স্বরূপ:

যদি আপনি অ্যাঙ্গুলার.জেএস ব্যবহার করার সিদ্ধান্ত নেন তবে একটি ইওমেন জেনারেটর রয়েছে , যা আপনাকে রাউটিং, ভিউ, পরিষেবাদি ইত্যাদির জন্য একটি কাঠামো দেয় যা আপনাকে পরীক্ষা করার অনুমতি দেয়, আপনার কোডকে ছোট করে তোলে ইত্যাদি ইত্যাদি

আপনি যদি ব্যাকবোন ব্যবহার করার সিদ্ধান্ত নেন তবে এই জেনারেটরটি চেকআউট করুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.