Ei Maung eimg

Functional Programming - လိုတိုရှင်း

Programming ကို လေ့လာကြသူအများစုဟာ Procedural Programming (သို့မဟုတ်) Object-Oriented Programming (OOP) ရေးနည်းတွေနဲ့ စတင်လေ့လာခဲ့ကြတာ များပါတယ်။ System Level Language အများစုဟာ Procedural Language တွေဖြစ်ကြပါတယ်။ C, Go, Rust, Zig စသည်ဖြင့်။ Application Level Language အများစုကတော့ OOP Language တွေများပါတယ်။ Java, C#, Python, Ruby, PHP, JavaScript စသည်ဖြင့်။

Functional Programming ကိုတော့ လေ့လာသူတွေ ထိတွေ့မှုနည်းကြပါတယ်။ ဒါပေမယ့် ကနေ့ခေတ်မှာ Functional Programming ဟာ အလွန်အရေးပါတဲ့ ရေးနည်းတစ်ခုဖြစ်နေသလို စောစောက ပြောခဲ့တဲ့ Language အများစုကလည်း Functional Programming ရေးနည်းကို အပြည့်မရပေမယ့် နည်းနည်းတော့ Support လုပ်ကြပါတယ်။

Functional Programming ရေးနည်းကိုပဲ အဓိကထားတဲ့ Language တွေလည်း ရှိကြပါတယ်။ Lisp, Haskell, Erlang, Elixir, Scala, F# စသည်ဖြင့်။

ကနေ့ခေတ်မှာ Functional Programming ရဲ့ အခန်းကဏ္ဍဟာ တစ်နေ့တစ်ခြား ပိုအရေးပါလာတဲ့အတွက် မူလက Procedural Language တွေ OOP Language တွေနဲ့ လေ့လာခဲ့ကြသူတွေဟာ Functional Programming ကိုလည်း အသုံးချနိုင်ဖို့ လိုအပ်လာကြပါတယ်။

TypeScript - လိုတိုရှင်း

JavaScript ဟာ Dynamic Type Language တစ်ခုပါ။ Data Type တွေကို Language က လိုသလို အလိုအလျှောက် ပြောင်းလဲအလုပ်လုပ်ပေးတဲ့အတွက် ရေးသားသူက Type ကိစ္စ သိပ်ခေါင်းစားနေစရာမလိုဘဲ ရေးစရာရှိတဲ့ကုဒ်တွေကို ခပ်မြန်မြန် ရေးသွားလို့ရပါတယ်။

let value;        // undefined
value = "Alice";  // string
value = 42;       // number
value = true;     // boolean

Livewire Tutorial with Volt

Laravel ကို ဘယ် Front-end နည်းပညာနဲ့မဆို တွဲဖက်အသုံးပြုလို့ရပါတယ်။ အဲ့ဒီလို တွဲဖက်အသုံးပြုလို့ရတဲ့ နည်းပညာတွေထဲက Livewire အကြောင်းကို တစ်ခါထဲ လက်တွေ့လိုက်လုပ်ကြည့်လို့ရမယ့် Tutorial ပုံစံနဲ့ ပြီးခဲ့တဲ့ ပိုစ့်မှာ ဖော်ပြခဲ့ပြီးဖြစ်ပါတယ်။

အဲ့ဒီ Tutorial မှာ Class Component တွေကို အသုံးပြု ဖော်ပြခဲ့ပြီး ဒီတစ်ခါတော့၊ ပုံစံတူ Tutorial ကိုပဲ အသစ်ထွက်ထားတဲ့ Livewire 3 မှာပါတဲ့ Functional Component တွေနဲ့ အနည်းငယ်ပြင်ဆင်ပြီး ထပ်မံဖော်ပြလိုက်ပါတယ်။

Project Setup

စမ်းသပ်ကြည့်နိုင်ဖို့အတွက် ပထမဆုံး Laravel ပရောဂျက် အသစ်တစ်ခုကို အခုလို တည်ဆောက်ယူလိုက်ပါ။

Laravel Livewire Tutorial

Laravel ကို ဘယ် Front-end နည်းပညာနဲ့မဆို တွဲဖက်အသုံးပြုလို့ရပါတယ်။ အဲ့ဒီလို တွဲဖက်အသုံးပြုလို့ရတဲ့ နည်းပညာတွေထဲက Livewire အကြောင်းကို တစ်ခါထဲ လက်တွေ့လိုက်လုပ်ကြည့်လို့ရမယ့် Tutorial ပုံစံနဲ့ ဖော်ပြသွားမှာပါ။ Livewire ကို အကျဉ်းချုပ်အားဖြင့် JavaScript တွေရေးစရာမလိုတော့ဘဲ PHP နဲ့ပဲ Sing-Page Application (SPA) တွေ ဖန်တီးလို့ရတဲ့ နည်းပညာလို့ ဆိုနိုင်ပါတယ်။

Project Setup

စမ်းသပ်ကြည့်နိုင်ဖို့အတွက် ပထမဆုံး Laravel ပရောဂျက် အသစ်တစ်ခုကို အခုလို တည်ဆောက်ယူလိုက်ပါ။

composer create-project laravel/laravel tall

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Popover</title>
	<style>
	body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	max-width: 800px;

	const getFile = async () => {
	const [fileHandle] = await window.showOpenFilePicker({
	types: [
	{
	description: "Images",
	accept: {
	"image/*": [".png", ".jpeg", ".jpg"],
	},
	},
	],

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Todo</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/all.min.css">
	</head>

	const pipeline = [
	{
	$match: { type: 'post' },
	},
	{
	$match: {
	owner: { $in: ['1', '2', '3'] }
	},
	},
	{

	/* createAppSlice.js **/
	// import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit";

	// export const createAppSlice = buildCreateSlice({
	// creators: { asyncThunk: asyncThunkCreator },
	// });

	/* mySlice.js */
	import { createAppSlice } from "./createAppSlice";

	/* mySlice.js */
	import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

	export const asyncMethod = createAsyncThunk("action/id", async () => {
	// fetch and return data
	// will become action payload
	});

	export const mySlice = createSlice({
	name: "name",