====== Development Stacks ======


<diagram>
| AAA |-| BBB |
| |:| | | | | |
| |L|~|~| CCC |
</diagram>

<diagram>
| FE | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |FE=Front-end
| |!| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| |)| JS |v| ES6+ |-| TS | | | | | | | | | | | | | | | | | | | | | |JS=[[public:computer:javascript|JavaScript]]|TS=[[public:computer:typescript|TypeScript]]
| |!| | | |!| | | | | | | | | | | | | | | | | | | | | | | | | |
| |!| | | |)| BA | | | | | | | | | | | | | | | | | | | | | | | |BA=Browser APIs
| |!| | | |!| | | | | | | | | | | | | | | | | | | | | | | | | |
| |!| | | |`| JFW |v| VJS |-|NJ| | | | | | | | | | | | | | | | | | |JFW=JavaScript Framework|VJS=[[public:computer:vuejs|Vue.js]]|NJ=[[public:computer:nuxtjs|Nuxt.js]]
| |!| | | | | | | |!| | | | | | | | | | | | | | | | | | | | | |
| |!| | | | | | | |)| RJS | | | | | | | | | | | | | | | | | | | |RJS=React.js
| |!| | | | | | | |!| | | | | | | | | | | | | | | | | | | | | |
| |!| | | | | | | |`| UUFW |v| DX | | | | | | | | | | | | | | | | |UUFW=UI/UX Framework|DX=DevExtreme
| |!| | | | | | | | | | | |!| | | | | | | | | | | | | | | | | |
| |!| | | | | | | | | | | |`| WJ | | | | | | | | | | | | | | | |WJ=Wijmo
| |!| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| |)| NODE |v| PM |v| npm | | | | | | | | | | | | | | | | | | | | | |NODE=Node.js|PM=Package Manager
| |!| | | |!| | | |!| | | | | | | | | | | | | | | | | | | | | |
| |!| | | |!| | | |`| yarn | | | | | | | | | | | | | | | | | | | |
| |!| | | |!| | | | | | | | | | | | | | | | | | | | | | | | | |
| |!| | | |`| MB |v| webpack | | | | | | | | | | | | | | | | | | | | |MB=Module Bunder
| |!| | | | | | | |!| | | | | | | | | | | | | | | | | | | | | | |
| |!| | | | | | | |)| rollup | | | | | | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | | | | | | | | | | | | | | | | |
| |!| | | | | | | |`| parcel | | | | | | | | | | | | | | | | | | | | |
| |!| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| |`| Types? | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | | |!| | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | | |)| SPA | | | | | | | | | | | | | | | | | | | | | | | | | |
| | | |!| | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | | |)| SSR | | | | | | | | | | | | | | | | | | | | | | | | | |
| | | |!| | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | | |`| CSR | | | | | | | | | | | | | | | | | | | | | | | | | |
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
</diagram>

<diagram>
| BE | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |BE=Back-end
| |!| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| |)| Java |-| SF |v| Concepts |v| AOP | | | | | | | | | | | | | | | | | | |SF=[[public:computer:java_spring_framework|Spring Framework (Java)]]
| |!| | | | | | | |!| | | |!| | | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |)| DI | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |!| | | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |)| IoC | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |!| | | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |`| DP |v| MVC |v| MO | | | | | | | | | |DP=[[public:computer:design_patterns|Design Patterns]]|MO=Model:Observer
| |!| | | | | | | |!| | | | | | | |!| | | |!| | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |!| | | |)| VC | | | | | | | |VC=View:Composite
| |!| | | | | | | |!| | | | | | | |!| | | |!| | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |!| | | |`| CS | | | | | | | |CS=Controller:Strategy
| |!| | | | | | | |!| | | | | | | |!| | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |)| Proxy | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |!| | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |)| Singleton | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |!| | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |)| Template | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |!| | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |)| FC | | | | | | | | | | | |FC=Front Controller
| |!| | | | | | | |!| | | | | | | |!| | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |)| VH | | | | | | | | | | | |VH=View Helper
| |!| | | | | | | |!| | | | | | | |!| | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |)| SL | | | | | | | | | | | |SL=Service Locator
| |!| | | | | | | |!| | | | | | | |!| | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |)| OO | | | | | | | | | | | |OO=Observer-Observable
| |!| | | | | | | |!| | | | | | | |!| | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |)| CO | | | | | | | | | | | |CO=Context Object
| |!| | | | | | | |!| | | | | | | |!| | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |`| Facade | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | | | | | | | | | | | | | | | |
| |!| | | | | | | |)| IDE |v| VC | | | | | | | | | | | | | | | | |VC=[[public:computer:vscode|Visual Studio Code]]
| |!| | | | | | | |!| | | |!| | | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |)| STS | | | | | | | | | | | | | | | |STS=Spring Tool Suites \\ [[public:computer:eclipse|Eclipse]]
| |!| | | | | | | |!| | | |!| | | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |`| IntelliJ | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | | | | | | | | | | | | | | | |
| |!| | | | | | | |)| Build |v| Gradle | | | | | | | | | | | | | | | | |Gradle=[[public:computer:gradle|Gradle]]
| |!| | | | | | | |!| | | |!| | | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |`| Maven | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | | | | | | | | | | | | | | | |
| |!| | | | | | | |)| DF |v| MyBatis | | | | | | | | | | | | | | | | |DF=Database Framework
| |!| | | | | | | |!| | | |!| | | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |`| JPA | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | | | | | | | | | | | | | | | |
| |!| | | | | | | |)| Security |v| Authentication |v| oAuth2 | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |!| | | |!| | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |!| | | |`| JWT | | | | | | | | | | | |JWT=[[public:computer:jwt|JWT (Json Web Token)]]
| |!| | | | | | | |!| | | |!| | | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |`| WS |v| CORS | | | | | | | | | | | | |WS=Web Security
| |!| | | | | | | |!| | | | | | | |!| | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |)| CSRF | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |!| | | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | |`| XSS | | | | | | | | | | | |
| |!| | | | | | | |!| | | | | | | | | | | | | | | | | | | | | |
| |!| | | | | | | |)| Network |v| socket | | | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| | | |!| | | | | | | | | | | | | | | | | |
| |!| | | | | | | |!| |  | |`| WS | | | | | | | | | | | |WS=Web Socket | | | | |
| |!| | | | | | | |!| | | | | | | | | | | | | | | | | | | | | |
| |!| | | | | | | |`| MQ | | | | | | | | | | | | | | | | | | | |MQ=Message Queue
| |!| | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| |)| HTTP |v| HTTP/1.1 |v| RA | | | | | | | | | | | | | |HTTP=[[public:computer:http|HTTP]]|RA=Rest API \\ [[public:computer:restful|RESTful]]
| |!| | | |!| | | |!| | | | | | | | | | | | | |
| |!| | | |!| | | |`| GraphQL | | | | | | | | | | | |
| |!| | | |!| | | | | | | | | | | | | | | | | | | |
| |!| | | |`| SSL | | | | | | | | | | | | | | | |
| |!| | | | | | | | | | | | | | | | | | | | | | | |
| |`| Server |v| Web Server |-| Nginx | | | | | | | | | | | | | |
| | | | | |!| | | | | | | | | | | | | | | | | |
| | | | | |`| WAS |v| Tomcat | | | | | | | | | | | | |
| | | | | | | | | |!| | | | | | | | | | | | | |
| | | | | | | | | |`| Jeus | | | | | | | | | | | |
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
</diagram>