অক্টোবর 2018 আপডেট করুন
আপনি যদি ফ্রন্ট-এন্ড ডেভ সম্পর্কে এখনও অনিশ্চিত থাকেন তবে একটি দুর্দান্ত উত্সটি এখানে তাত্ক্ষণিকভাবে দেখতে পারেন।
https://github.com/kamranahmedse/developer-roadmap
জুন 2018 আপডেট করুন
আপনি যদি প্রথম থেকেই সেখানে না থাকেন তবে আধুনিক জাভাস্ক্রিপ্ট শেখা শক্ত। আপনি যদি নতুন আগত হন তবে আরও ভাল ওভারভিউ দেওয়ার জন্য এই দুর্দান্ত রচনাটি পরীক্ষা করে দেখুন।
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
জুলাই 2017 আপডেট করুন
2017 সালে ফ্রন্ট-এন্ড বিকাশের দিকে কীভাবে যোগাযোগ করা যায় সে সম্পর্কে সাম্প্রতিককালে গ্র্যাব টিমের একটি বিস্তৃত গাইড আমি পেয়েছি You আপনি নীচের মত এটি পরীক্ষা করে দেখতে পারেন।
https://github.com/grab/front-end-guide
আমি বেশ কিছুদিন ধরে এটিও অনুসন্ধান করছিলাম যেহেতু সেখানে প্রচুর সরঞ্জাম রয়েছে এবং সেগুলির প্রতিটি আমাদের আলাদা দিক থেকে উপকৃত করে। সম্প্রদায়টি বিভিন্ন সরঞ্জামগুলিতে বিভক্ত Browserify, Webpack, jspm, Grunt and Gulp। আপনি সম্পর্কে শুনতে পারে Yeoman or Slush। এটি আসলে কোনও সমস্যা নয়, এটি প্রত্যেকে একটি পরিষ্কার পথ বোঝার চেষ্টা করছে তাদের পক্ষে বিভ্রান্তি।
যাইহোক, আমি কিছু অবদান রাখতে চাই।
1. প্যাকেজ ম্যানেজার
প্যাকেজ পরিচালনাকারীরা প্রকল্প নির্ভরতা ইনস্টল করা ও আপডেট করা সহজ করেন, যা লাইব্রেরি যেমন:, jQuery, Bootstrapইত্যাদি - আপনার সাইটে ব্যবহৃত এবং আপনার দ্বারা লিখিত নয় এমন সমস্ত কিছুই।
সমস্ত গ্রন্থাগার ওয়েবসাইট ব্রাউজ করা, সংরক্ষণাগারগুলি ডাউনলোড এবং আনপ্যাক করা, প্রকল্পগুলিতে ফাইলগুলি অনুলিপি করা - এগুলি সমস্ত টার্মিনালের কয়েকটি কমান্ডের সাথে প্রতিস্থাপন করা হয়েছে।
NPMএর অর্থ: Node JS package managerআপনার সফ্টওয়্যার নির্ভর সমস্ত লাইব্রেরি পরিচালনা করতে আপনাকে সহায়তা করে। আপনি ডেকে আনা একটি ফাইলের মধ্যে আপনার প্রয়োজনীয়তা সংজ্ঞায়িত করে কমান্ড লাইনে package.jsonচালিত করবেন npm install... তারপরে ব্যাং, আপনার প্যাকেজগুলি ডাউনলোড হয়ে গেছে এবং ব্যবহারের জন্য প্রস্তুত। উভয় front-end and back-endগ্রন্থাগারের জন্য ব্যবহার করা যেতে পারে ।
Bower: ফ্রন্ট-এন্ড প্যাকেজ পরিচালনার জন্য, এনপিএমের সাথে ধারণাটি একই। আপনার সমস্ত লাইব্রেরি নামক কোনও ফাইলে সংরক্ষণ করা হয় bower.jsonএবং তারপরে bower installকমান্ড লাইনে চালিত হয়।
Bowerএবং এর মধ্যে সবচেয়ে বড় পার্থক্য NPMহ'ল এনপিএম নীড়যুক্ত নির্ভরতা গাছটি করে যখন বওয়ারের নীচে নীচে সমতল নির্ভরতা গাছের প্রয়োজন হয়।
বোর এবং এনপিএম এর মধ্যে পার্থক্য কী থেকে উদ্ধৃত করা হচ্ছে?
NPM
project root
[node_modules] // default directory for dependencies
-> dependency A
-> dependency B
[node_modules]
-> dependency A
-> dependency C
[node_modules]
-> dependency B
[node_modules]
-> dependency A
-> dependency D
আবাস
project root
[bower_components] // default directory for dependencies
-> dependency A
-> dependency B // needs A
-> dependency C // needs B and D
-> dependency D
কিছু আপডেট রয়েছে npm 3 Duplication and Deduplication, আরও বিস্তারিত জানার জন্য ডকটি খুলুন।
Yarn: জন্য একটি নতুন প্যাকেজ ম্যানেজার JavaScript প্রকাশিত দ্বারা Facebookসম্প্রতি তুলনায় আরো কিছু সুবিধার সঙ্গে NPM। এবং সুতোর সাহায্যে, আপনি প্যাকেজ আনতে এখনও উভয় NPMএবং Bowerরেজিস্ট্রি ব্যবহার করতে পারেন । আপনি যদি আগে কোনও প্যাকেজ ইনস্টল করেন তবে yarnএকটি ক্যাশেড অনুলিপি তৈরি করুন যা সহজ করে offline package installs।
jspm: SystemJSগতিশীল ES6মডিউল লোডার শীর্ষে নির্মিত সর্বজনীন মডিউল লোডার জন্য একটি প্যাকেজ ম্যানেজার । এটি নিজস্ব নিয়মগুলির একটি সম্পূর্ণ নতুন প্যাকেজ ম্যানেজার নয়, বরং এটি বিদ্যমান প্যাকেজ উত্সগুলির শীর্ষে কাজ করে। বাক্সের বাইরে, এটি GitHubএবং এর সাথে কাজ করে npm। যেহেতু বেশিরভাগ Bowerভিত্তিক প্যাকেজগুলি ভিত্তিক GitHub, আমরা সেই প্যাকেজগুলিও ব্যবহার করে ইনস্টল করতে পারি jspm। এটিতে একটি রেজিস্ট্রি রয়েছে যা সহজেই ইনস্টলেশনগুলির জন্য বেশিরভাগ ব্যবহৃত ফ্রন্ট-এন্ড প্যাকেজগুলি তালিকাভুক্ত করে।
Bowerএবং এর মধ্যে পৃথকটি দেখুন jspm:
প্যাকেজ পরিচালক: বোভার বনাম jspm
2. মডিউল লোডার / বান্ডিলিং
যে কোনও স্কেলের বেশিরভাগ প্রকল্পের কোডগুলি বিভিন্ন ফাইলের মধ্যে বিভক্ত হবে। আপনি কেবলমাত্র প্রতিটি ফাইলকে একটি পৃথক <script>ট্যাগ সহ অন্তর্ভুক্ত করতে পারেন , তবে <script>একটি নতুন HTTP সংযোগ স্থাপন করে এবং ছোট ফাইলগুলির জন্য - যা মডিউরিয়ালিটির লক্ষ্য - সংযোগ স্থাপনের সময় ডেটা স্থানান্তরিত করার চেয়ে বেশি সময় নিতে পারে। স্ক্রিপ্টগুলি ডাউনলোড করার সময়, পৃষ্ঠায় কোনও সামগ্রী পরিবর্তন করা যাবে না।
- ডাউনলোডের সময়ের সমস্যাটি একক ফাইলে সাধারণ মডিউলগুলির একটি গ্রুপকে সংযুক্ত করে এবং এটিকে ছোট করে কার্যকর করা যায়।
যেমন
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- পারফরম্যান্স যদিও নমনীয়তার ব্যয়ে আসে। যদি আপনার মডিউলগুলির আন্ত-নির্ভরতা থাকে, তবে নমনীয়তার এই অভাবটি শোস্টোপার হতে পারে।
যেমন
<head>
<title>Skateboard</title>
<script src=“connectors/axle.js”></script>
<script src=“frames/board.js”></script>
<!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
<script src=“rolling-things/abstract-rolling-thing.js”></script>
<script src=“rolling-things/wheels/skateboard-wheel.js”></script>
<!-- but if skateboard-wheel also depends on ball-bearing -->
<!-- then having this script tag here could cause a problem -->
<script src=“rolling-things/ball-bearing.js”></script>
<!-- connect wheels to axle and axle to frame -->
<script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>
কম্পিউটারগুলি আপনার চেয়ে ভাল এটি করতে পারে এবং সে কারণেই আপনাকে একটি সরঞ্জাম নিজেরাই সব কিছু একক ফাইলে বান্ডিল করার জন্য ব্যবহার করা উচিত।
তারপর আমরা শুনেছি সম্পর্কে RequireJS, Browserify, WebpackএবংSystemJS
RequireJS: একটি JavaScriptফাইল এবং মডিউল লোডার। এটি ব্রাউজারে ব্যবহারের জন্য অনুকূলিত হয়েছে, তবে এটি অন্যান্য জাভাস্ক্রিপ্ট পরিবেশে যেমন ব্যবহার করা যেতে পারে Node।
যেমন: myModule.js
// package/lib is a dependency we require
define(["package/lib"], function (lib) {
// behavior for our module
function foo() {
lib.log( "hello world!" );
}
// export (expose) foo to other modules as foobar
return {
foobar: foo
}
});
ইন main.js, আমরা myModule.jsনির্ভরতা হিসাবে আমদানি করতে এবং এটি ব্যবহার করতে পারি।
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
এবং তারপরে আমাদের মধ্যে HTML, আমরা ব্যবহারটি উল্লেখ করতে পারি RequireJS।
<script src=“app/require.js” data-main=“main.js” ></script>
সহজেই বোঝার জন্য CommonJSএবং আরও পড়ুন AMD।
কমনজেএস, এএমডি এবং প্রয়োজনীয় জেএসের মধ্যে সম্পর্ক?
Browserify: CommonJSব্রাউজারে ফর্ম্যাট করা মডিউলগুলি ব্যবহারের অনুমতি দেওয়ার জন্য সেট আউট । ফলস্বরূপ, Browserifyমডিউল বান্ডেলারের মতো কোনও মডিউল লোডার নয়: Browserifyপুরোপুরি একটি বিল্ড-টাইম সরঞ্জাম, কোডের একটি বান্ডিল উত্পাদন করে যা ক্লায়েন্ট-সাইড লোড করা যায়।
নোড এবং এনপিএম ইনস্টল করা একটি বিল্ড মেশিন দিয়ে শুরু করুন এবং প্যাকেজটি পান:
npm install -g –save-dev browserify
CommonJSবিন্যাসে আপনার মডিউল লিখুন
//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));
এবং খুশি হলে, বান্ডিল করতে আদেশটি জারি করুন:
browserify entry-point.js -o bundle-name.js
ব্রাউজরিফাই পুনরাবৃত্তভাবে এন্ট্রি-পয়েন্টের সমস্ত নির্ভরতা খুঁজে পায় এবং তাদের একটি একক ফাইলে সংযুক্ত করে:
<script src=”bundle-name.js”></script>
Webpack: এটি JavaScriptচিত্র, সিএসএস এবং আরও অনেকগুলি সহ আপনার স্থিতিশীল সম্পদের একটি একক ফাইলে বান্ডিল করে । এটি আপনাকে বিভিন্ন ধরণের লোডারগুলির মাধ্যমে ফাইলগুলি প্রক্রিয়া করতে সক্ষম করে। আপনি আপনার বা মডিউলগুলি সিনট্যাক্স JavaScriptসহ লিখতে পারেন । এটি মৌলিকভাবে আরও সংহত ও মতামতপূর্ণভাবে বিল্ড সমস্যাকে আক্রমণ করে। ইন আপনি ব্যবহার এবং কাজ শেষ করার জন্য রূপান্তরগুলির এবং প্লাগইনগুলির একটি দীর্ঘ তালিকা। বাক্সের বাইরে পর্যাপ্ত শক্তি সরবরাহ করে যা আপনার সাধারণত প্রয়োজন হয় না বা মোটেও হয় না।CommonJSAMDBrowserifyGulp/GruntWebpackGruntGulp
বেসিক ব্যবহার সহজ is ব্রাউজরিফির মতো ওয়েবপ্যাক ইনস্টল করুন:
npm install -g –save-dev webpack
এবং কমান্ডটি একটি এন্ট্রি পয়েন্ট এবং একটি আউটপুট ফাইলটি পাস করুন:
webpack ./entry-point.js bundle-name.js
SystemJS: একটি মডিউল লোডার যা বর্তমানে ব্যবহৃত জনপ্রিয় ফর্ম্যাটের যে কোনওটিতে রান সময়ে মডিউল আমদানি করতে পারে ( CommonJS, UMD, AMD, ES6)। এটি ES6মডিউল লোডার পলিফিলের শীর্ষে নির্মিত এবং ব্যবহৃত ফর্ম্যাটটি সনাক্ত করতে এবং এটি যথাযথভাবে পরিচালনা করতে যথেষ্ট স্মার্ট। SystemJSএছাড়াও ES6 কোড ( Babelবা এর সাথে Traceur) বা অন্যান্য ভাষা যেমন প্লাগইনগুলি ব্যবহার করে TypeScriptএবং CoffeeScriptব্যবহার করতে পারে transp
node moduleএটি কী এবং কেন এটি ব্রাউজারে ভালভাবে মানিয়ে যায় না তা জানতে চান ।
আরও দরকারী নিবন্ধ:
কেন jspmএবং SystemJS?
প্রধান লক্ষ্য এক ES6modularity এর এটি ইনস্টল করা অত্যন্ত সহজ করতে এবং ইন্টারনেটে যে কোন জায়গা থেকে কোন JavaScript লাইব্রেরি ব্যবহার করবেন (হয় Github, npmইত্যাদি)। শুধুমাত্র দুটি জিনিস প্রয়োজন:
- লাইব্রেরি ইনস্টল করার জন্য একটি একক কমান্ড
- লাইব্রেরিটি আমদানি করতে এবং এটি ব্যবহারের জন্য কোডের একক লাইন
সুতরাং jspm, আপনি এটি করতে পারেন।
- কমান্ড সহ গ্রন্থাগারটি ইনস্টল করুন:
jspm install jquery
- কোডের একক লাইন সহ গ্রন্থাগারটি আমদানি করুন, আপনার HTML ফাইলের অভ্যন্তরে বাহ্যিক রেফারেন্সের প্রয়োজন নেই।
display.js
var $ = require('jquery');
$('body').append("I've imported jQuery!");
তারপরে আপনি System.config({ ... })নিজের মডিউলটি আমদানি করার আগে এই জিনিসগুলি কনফিগার করুন। সাধারণত চালানোর সময় jspm init, config.jsএই উদ্দেশ্যে একটি ফাইল থাকবে ।
এই স্ক্রিপ্টগুলি চালিত করতে, আমাদের HTML পৃষ্ঠাতে system.jsএবং লোড করা দরকার config.js। এর পরে আমরা মডিউল লোডার display.jsব্যবহার করে ফাইলটি লোড করব SystemJS।
index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import("scripts/display.js");
</script>
উল্লেখযোগ্য: আপনি ব্যবহার করতে পারেন npmসঙ্গে Webpackযেমন কৌণিক 2 তা প্রয়োগ করা হয়েছে। যেহেতু jspmএটির সাথে সংহত করার জন্য বিকাশ করা হয়েছিল SystemJSএবং এটি বিদ্যমান npmউত্সের শীর্ষে কাজ করে , সুতরাং আপনার উত্তর আপনার উপর নির্ভর করবে।
3. কার্য রানার
টাস্ক রানার এবং বিল্ড টুলস মূলত কমান্ড-লাইন সরঞ্জাম। কেন আমাদের সেগুলি ব্যবহার করতে হবে: এক কথায়: অটোমেশন । মিনিফিকেশন, সংকলন, ইউনিট টেস্টিং, লেটিংয়ের পুনরাবৃত্তির কাজগুলি সম্পাদন করার সময় আপনার যত কম কাজ করতে হবে যা কমান্ড লাইনের সাথে এমনকি ম্যানুয়ালি করার আগে আমাদের অনেক সময় ব্যয় করে।
Grunt: আপনি প্রাক-প্রক্রিয়া কোডগুলি করতে আপনার বিকাশের পরিবেশের জন্য অটোমেশন তৈরি করতে পারেন বা কোনও কনফিগার ফাইল দিয়ে বিল্ড স্ক্রিপ্ট তৈরি করতে পারেন এবং জটিল কোনও কাজ পরিচালনা করা খুব কঠিন বলে মনে হয়। গত কয়েক বছরে জনপ্রিয়।
প্রতিটি কাজ Gruntহ'ল বিভিন্ন প্লাগইন কনফিগারেশনের একটি অ্যারে, যা কেবল একের পর এক নির্বাহ করা হয়, কঠোরভাবে স্বাধীন এবং ক্রমবর্ধমান ফ্যাশনে।
grunt.initConfig({
clean: {
src: ['build/app.js', 'build/vendor.js']
},
copy: {
files: [{
src: 'build/app.js',
dest: 'build/dist/app.js'
}]
}
concat: {
'build/app.js': ['build/vendors.js', 'build/app.js']
}
// ... other task configurations ...
});
grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);
Gulp: অটোমেশন ঠিক যেমন Gruntতবে কনফিগারেশনের পরিবর্তে, আপনি JavaScriptনোড অ্যাপ্লিকেশনের মতো স্ট্রিম দিয়ে লিখতে পারেন । এই দিনগুলিকে পছন্দ করুন।
এটি একটি Gulpনমুনা টাস্কের ঘোষণা।
//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
//declare the task
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
আরও দেখুন: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri
৪. স্ক্যাফোল্ডিং সরঞ্জাম
Slush and Yeoman: আপনি তাদের সাথে স্টার্টার প্রকল্পগুলি তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি এইচটিএমএল এবং এসসিএসএস দিয়ে একটি প্রোটোটাইপ তৈরির পরিকল্পনা করছেন, তারপরে ম্যানুয়ালি পরিবর্তে স্ক্যাস, সিএসএস, আইএমজি, ফন্টের মতো কিছু ফোল্ডার তৈরি করুন। আপনি কেবল yeomanএকটি সাধারণ স্ক্রিপ্ট ইনস্টল এবং চালাতে পারেন । তাহলে এখানে আপনার জন্য সবকিছু।
এখানে আরও সন্ধান করুন ।
npm install -g yo
npm install --global generator-h5bp
yo h5bp
আরও দেখুন: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack- ব্রাউজারিফি- স্লুশ- Yeoman- এবং- এক্সপ্রেস
আমার উত্তরটি প্রশ্নের সামগ্রীর সাথে সত্যিই মেলে না তবে আমি যখন গুগলে এই জ্ঞানটি অনুসন্ধান করছি, আমি সর্বদা প্রশ্নটিকে উপরে দেখি যাতে আমি সংক্ষিপ্তভাবে উত্তর দেওয়ার সিদ্ধান্ত নিয়েছিলাম। আশা করি আপনি বলছি এটি সহায়ক হয়েছে।