Photo by E Mens on Unsplash

2021 JS Trends

2021 GitHub’da En Yüksek 50 JavaScript Reposu

Her sene JS dünyasında neler olduğu konusunda StateOfJS sitesini detaylı bir şekilde analiz ederim. Aynı zamanda CSS için kardeş site StateOfCSS bir göz gezdiririm. Bu bakışa GitHub Repolarını’da dahil etmeye karar verdim.

2021 konusunda öngörülerimizi, tahminlerimizi Muhammed Hilmi Koca organize ettiği Yazılım Dünyasında 2021 Trendleri yazısında belirtmiştik. Bu çalışma bana bazı konularda fikirler verdi. Örneğin her sene yapılan bu çalışmalar , not tutmalar bir sonraki sene ile karşılaştırma yapmanızı sağlayan araçlara dönüşebiliyor. Ben bu yöntemi aslında StateOfJS sitesindeki anket sonuçlarını önceki seneler ile karşılaştırarak sürekli kullanıyorum.

GitHub’daki JS Repoları içinde benzer notlar tutmanın iyi olabileceğini düşündüm. Bundan dolayı aşağıdaki şekilde ilk 50 Javascript Reposunu analiz eden bir çalışma yapmaya karar verdim.

Sorgu’yuda buraya not olarak ekliyeyim, Bazı anlamadığım Repo’ları sıradan çıkardım. Bazıları ingilizce yazılmamış, bazıları star verirsen çalışan toolkitler. Bu ve benzeri repoları listeye ekleMEdim.

Sorgu aslında 30K üzerindeki repoları listeliyor.

https://github.com/search?q=stars%3A%3E30000+language%3AJavaScript&type=Repositories

Twitter’dan gelen bir yorum üzerine bu 50 repoya Typescript gelen repolarıda eklemenin mantıklı olacağına karar verdim

https://github.com/search?p=1&q=stars%3A%3E30000+language%3ATypeScript&type=Repositories

Aldığı Star Sayısına Göre İlk 50 JS Reposu ve TS Repoları (14 Şub 2021)

1. freeCodeCamp: freeCodeCamp.org’s open source codebase and curriculum. Learn to code for free. (320K star)
2. vue : Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. (179K star)
3. react: A declarative, efficient, and flexible JavaScript library for building user interfaces. (164K star)
4. bootstrap: The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. (148K star)
5. vscode(TS): Visual Studio Code (111 K star)
6. airbnb/javascript: JavaScript Style Guide (105K star)
7. javascript-algorithms: Algorithms and data structures implemented in JavaScript with explanations and links to further readings (96K star)
8. d3: Bring data to life with SVG, Canvas and HTML (95.7K star)
9. react-native: A framework for building native apps with React. (93.3K)
10. create-react-app: Set up a modern web app by running one command. (85.9K)
11. axios: Promise based HTTP client for the browser and node.js (81.6K)
12. node: Node.js JavaScript runtime (76.9K)
13. angular (TS): One framework. Mobile & desktop. (70.7K)
14. puppeteer(TS): Headless Chrome Node.js API (68.8K)
15. TypeScript (TS): TypeScript is a superset of JavaScript that compiles to clean JavaScript output. (68.6K)
16. 30-seconds-of-code: Short JavaScript code snippets for all your development needs (68.4K)
17. three.js: JavaScript 3D library. (67.2K)
18. ant-design (TS): A UI Design Language and React UI library (66.8K)
19. material-ui: Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React appl…(65.2K)
20. Font-Awesome: The iconic SVG, font, and CSS toolkit (65K)
21. vercel/next.js: The React Framework (62.5K)
22. nodebestpractices: The Node.js best practices list (60.7K)
23. angular.js: AngularJS — HTML enhanced for web apps! (59.6K)
24. storybook (TS): The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!(58.5K)
25. redux (TS): Predictable state container for JavaScript apps (55.3K)
26. webpack: A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading…(57.4K)
27. reveal.js: The HTML Presentation Framework (55.5K)
28. jquery: jQuery JavaScript Library (54.5K)
29. realworld: “The mother of all demo apps” — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and man…(54.4K)
30. atom/atom: The hackable text editor (54.3K)
31. awesome-selfhosted: A list of Free Software network services and web applications which can be hosted on your own servers (53.6K)
32. socket.io: Realtime application framework (52.5K)
33. json-server Get a full fake REST API with zero coding in less than 30 seconds (52.2K)
34. Chart.js: Simple HTML5 Charts using the <canvas> tag (52.1K)
35. express: Fast, unopinionated, minimalist web framework for node.(51.9K)
36. markdown-here: Google Chrome, Firefox, and Thunderbird extension that lets you write email in Markdown and render it before sending. (50.2K)
37. tech-interview-handbook: Materials to help you rock your next coding interview (49.8K)
38. html5-boilerplate: A professional front-end template for building fast, robust, and adaptable web apps or sites. (49K)
39. gatsby: Build blazing fast, modern apps and websites with React (49K)
40. Semantic-UI: Semantic is a UI component framework based around useful principles from natural language. (49K)
41. clean-code-javascript: Clean Code concepts adapted for JavaScript (45.8K)
42. lodash: A modern JavaScript utility library delivering modularity, performance, & extras. (48.2K)
43. clean-code-javascript: Clean Code concepts adapted for JavaScript (45.8K)
44. moment: Parse, validate, manipulate, and display dates in javascript. (45.4K)
45. echarts (TS): Apache ECharts is a powerful, interactive charting and data visualization library for browser t (45.1K)
46. svelte (TS) : Cybernetically enhanced web apps
47. ionic-framework (TS): A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CS… (43K)
48. react-router: Declarative routing for React (42.7K)
49. meteor: Meteor, the JavaScript App Platform (42.3)
50. awesome-mac:  Now we have become very big, Different from the original idea. Collect premium software in various categories. (40.9K)
51. code-server(TS): VS Code in the browser (40.1K)
52. grafana (TS) : The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multi… (39.8K)
53. yarn: Fast, reliable, and secure dependency management. (39.5K)
54. prettier: Prettier is an opinionated code formatter. (38.9K)
55. serverless: Serverless Framework — Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azur… (38.8K)
56. babel: Babel is a compiler for writing next generation JavaScript. (38.4)
57. materialize: Materialize, a CSS Framework based on Material Design (38.4K)
58. anime: JavaScript animation engine (38.2)
59. nw.js: Call all Node.js modules directly from DOM/WebWorker and enable a new way of writing applications with all Web techno…(37.8)
60. parcel: Blazing fast, zero configuration web application bundler (37.6)
61. Ghost: The #1 headless Node.js CMS for professional publishing (36.2K)
62. impress.js: It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired (36.1K)

30K star üzeri olan ama ilk 50'de olmayan bazı repolar strapi, pdf.js, nuxt.js, dayjs, algorithm-visualizer, brackets, styled-components, gulp, faker.js, immutable-js, koa, video.js, clipboard.js, Leaflet, hyper, nest, jest,

Gruplandırma

30K üzerindeki Repo’ları alt alta dizsek’te bunlar aynı türde JS repoları değil. Bu repoları daha farklı gruplandırmalar ile anlatsak daha iyi olacağını düşünüyorum.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Bazı repolar içerisinde sizin konuları öğrenmeniz veya bazı konularda daha fazla deneyim oluşturmanız için hazırlanmış Örnek, Link Listesi, Best Practice yaklaşımları içeren Repolar

1. freeCodeCamp: freeCodeCamp.org’s open source codebase and curriculum. Learn to code for free. (320K star)
2. javascript-algorithms: Algorithms and data structures implemented in JavaScript with explanations and links to further readings (96K star)
3. 30-seconds-of-code: Short JavaScript code snippets for all your development needs (68.4K)
4. nodebestpractices: The Node.js best practices list (60.7K)
5. realworld: “The mother of all demo apps” — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and man…(54.4K)
6. awesome-selfhosted: A list of Free Software network services and web applications which can be hosted on your own servers (53.6K)
7. tech-interview-handbook: Materials to help you rock your next coding interview (49.8K)
8. clean-code-javascript: Clean Code concepts adapted for JavaScript (45.8K)
9. awesome-mac:  Now we have become very big, Different from the original idea. Collect premium software in various categories. (40.9K)
10. 33-js-concepts: 33 concepts every JavaScript developer should know. (36.3K)
11. algorithm-visualizer

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Bazı Repolarda sizin UI Bileşenleri, Chart , Görselleştirme veya 3 Boyutlu Bileşenleri Oluşturmanızı ve Render etmenizi sağlayan kütüphanelerdir.

1. vue : Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. (179K star)
2. react: A declarative, efficient, and flexible JavaScript library for building user interfaces. (164K star)
3. d3: Bring data to life with SVG, Canvas and HTML (95.7K star)
4. react-native: A framework for building native apps with React. (93.3K)
5. three.js: JavaScript 3D library. (67.2K)
6. angular (TS): One framework. Mobile & desktop. (70.7K)
7. angular.js: AngularJS — HTML enhanced for web apps! (59.6K)
8. jquery: jQuery JavaScript Library (54.5K)
9. Chart.js: Simple HTML5 Charts using the <canvas> tag (52.1K)
10. echarts (TS): Apache ECharts is a powerful, interactive charting and data visualization library for browser t (45.1K)
11. svelte (TS) : Cybernetically enhanced web apps
12. ionic-framework (TS): A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CS… (43K)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Bazı Repolar size bu UI Bileşenleri oluşturabilmeniz için hazır CSS Layout veya CSS Bileşenleri sağlar.

1. bootstrap: The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. (148K star)
2. ant-design (TS): A UI Design Language and React UI library (66.8K)
3. material-ui: Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React appl…(65.2K)
4. Font-Awesome: The iconic SVG, font, and CSS toolkit (65K)
5. Semantic-UI: Semantic is a UI component framework based around useful principles from natural language. (49K)
6. html5-boilerplate: A professional front-end template for building fast, robust, and adaptable web apps or sites. (49K)
7. materialize: Materialize, a CSS Framework based on Material Design (38.4K)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Bazı Repolar size Uygulama yazarken uygulama ile birlikte çalışacak Utility araç kütüphaneleridir.

1. axios: Promise based HTTP client for the browser and node.js (81.6K)
2. redux (TS): Predictable state container for JavaScript apps (55.3K)
3. lodash: A modern JavaScript utility library delivering modularity, performance, & extras. (48.2K)
4. moment: Parse, validate, manipulate, and display dates in javascript. (45.4K)
5. react-router: Declarative routing for React (42.7K)
6. anime: JavaScript animation engine (38.2)
7. pdf.js, dayjs, immutable-js,video.js, clipboard.js, Leaflet

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Bazı repolar sizin kodu daha High Level yazmanızı sağlar ama Çalışma ve Production ortamına çıkarken bunların Optimizasyonu, Her Ortamda Çalışmasını sağlayan kütüphanelerdir.

1. TypeScript (TS): TypeScript is a superset of JavaScript that compiles to clean JavaScript output. (68.6K)
2. webpack: A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading…(57.4K)
3. yarn: Fast, reliable, and secure dependency management. (39.5K)
4. babel: Babel is a compiler for writing next generation JavaScript. (38.4)
5. parcel: Blazing fast, zero configuration web application bundler (37.6)
6. gulp

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Bazı repolar içerik oluşturmanız bir takım Sunum ve CMS araçları sağlar

1. reveal.js: The HTML Presentation Framework (55.5K)
2. impress.js: It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired (36.1K)
3. Ghost: The #1 headless Node.js CMS for professional publishing (36.2K)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Bazı repolar React, Vue, JS kütüphanelerin detaylar ile uğraşmadan hızlı Uygulamalar geliştirmek için size hazır altyapılar (framework) sağlar

1. vercel/next.js: The React Framework (62.5K)
2. socket.io: Realtime application framework (52.5K)
3. express: Fast, unopinionated, minimalist web framework for node.(51.9K)
4. gatsby: Build blazing fast, modern apps and websites with React (49K)
5. meteor: Meteor, the JavaScript App Platform (42.3)
6. nuxt.js, nest

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Bazı repolar Kod geliştirme ortamı veya bu ortamda çalışacak Pluginler sağlar

1. vscode(TS): Visual Studio Code (111 K star)
2. atom/atom: The hackable text editor (54.3K)
3. prettier: Prettier is an opinionated code formatter. (38.9K)
4. brackets

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Fake test ortamı oluşturabilmek için araçlar, sunucular ve test verileri sağlayan repolar bulunur

1. puppeteer(TS): Headless Chrome Node.js API (68.8K)
2. storybook (TS): The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!(58.5K)
3. json-server Get a full fake REST API with zero coding in less than 30 seconds (52.2K)
4. faker.js, jest,

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Runtime olan JS Repolar bulunur.

1. node: Node.js JavaScript runtime (76.9K)
2. nw.js: Call all Node.js modules directly from DOM/WebWorker and enable a new way of writing applications with all Web techno…(37.8)

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.