GithubHelp home page GithubHelp logo

ecl1ps / vsts-react-extension Goto Github PK

View Code? Open in Web Editor NEW
4.0 3.0 2.0 332 KB

Base configuration for Azure DevOps extension development with the use of TypeScript and React. Also enables local development.

License: Creative Commons Zero v1.0 Universal

HTML 13.38% CSS 9.58% TypeScript 76.93% Shell 0.11%
azure-devops-extension vss-extension vsts-extension typescript react local-development template

vsts-react-extension's Introduction

Hi there ๐Ÿ‘‹

I love programming. It is a creative process and it feels so good to see something growing under your fingertips. It is even better when someone finds value in it. I'm glad I chose this direction. I am keen on learning new things. There is always something to discover - new language, new library or framework, new pattern or a way to do stuff. It is only natural that I tried many languages and types of apps throughout the course of my programming career. And I know it is just the beginning ๐Ÿ’–.

My past projects

Beginnings

I am a gamer. Well at least I was once... Still enjoying occasional gaming session but you know... time and all that. Anyway, games had a big impact on my life. And that is also how I got to programming on a "serious level".

TwinStar core

Back in 2010 when I was in my second year of Applied Informatics at a university I played WoW a lot. Specifically on a free server TwinStar. Free server generally means you are going to use an official game client but the backend is built from ground up (at first it was based on Trinity Core). To be honest quaility of the server was not good at the beginning. So I decided to contact the TwinStar team and started to help them with fixes and improvements. Work consisted of programming in C++ (server core and complex behaviour scripts) and SQL (world content and simple scripts). We also did some reverse engineering of the client app (data mining) and sniffing communication between client and server. Fun stuff. You could feel those improvements as you could play through them yourself.

Web presentation and CMS

After a year or so I picked up another project. A company web presentation with a custom CMS and DMS system on the backend. I was captivated by web development since we scratched its surface during highschool and this was a great opportunity to learn more. I have used a server-side page rendering using PHP, Nette framework, Latte templating engine, Dibi database layer and other technologies.

Orbital Devastation - the game!

In the spring of 2012 me and my friend Jakub said to ourselves: Why don't we make a game? It's a great time for us - we love games, we love coding and we have some spare time during college. Let's team-up and make it happen! And so we started working on Orbital Devastation. We didn't have much experience but we had passion. I was learning C# at that time so we picked that as a programming language. And as for the learning experience we intentionally didn't pick up any game framework or engine. We have started from the ground - building engine, rendering, scene objects, AI scripts, UI, networking (multiplayer - yeah!), shaders, collision detection... We also touched other areas as we had to make our own textures, sprites, sounds. Even though we never completely finished it - it is still a playable alpha version with working bots, matchmaking, tournaments with up to six players, dedicated server, own lobby and a lot of assets. Just try it yourself, it doesn't even require installing - just download and run! We were working on it for about 16 months and with over 1200 commits I am proud of what we managed to create.

Ixipixi - e-commerce project

In 2013 I worked for a half a year on an eshop-like project which featured community-created art selling. It was a PHP website based on PrestaShop. Sadly it didn't make it to the production phase. But I swear it wasn't my fault ๐Ÿ˜€.

TwinStar websites

After the last project I have returned to TwinStar. This time I was asked to pick up their major web projects and to push them up and beyond. Those projects are TwinHEAD and Armory.

  • Armory is a website showcasing all players' characters with their equipment, achievements, stats, PvP rankings and much more. Site is written in PHP and behaves as an API providing character data in XML format from live databases. Raw XML data is then processed in a browser using XSLT templates which creates an HTML page as a result. While this may seem as a good idea (client rendering, separation of concerns - data vs view) it is a nightmare to maintain and extend as you can't easily debug it and find the problem. Can't recommend it for bigger projects. It is based on wowarmory project.
  • TwinHEAD is the second website. It serves mainly two purposes: searchable database of everything in game (items, NPCs, spells, locations, achievements, dungeons...) and bugtracker which we built from ground up, connected it to previously mentioned database and tailored it for our specific needs. It is based on AoWoW project. Pages are mostly generated in PHP backend and partially constructed by JavaScript on client (tables and other more interactive bits). I have rewritten the site to use MVC architecture for better separation of concerns. It also employs Smarty 3 templating engine for view separation. Biggest challenges were: adding support for three latest game datadiscs (which required data mining from newer client apps and from other sources), creation of bugtracker and integration to other TwinStar services and infrastructure.

I have worked for Twinstar on-and-off for eight years.

Fulltime

TescoSW (current)

In 2014 I have graduated from college and landed a fulltime job - junior fullstack developer in TescoSW. The product is labeled as an "enterprise information system" and I have become a member of a team working on an in-house built framework which most of the company's products are using. Framework is based on a model-driven architecture and contains many tools for automatization and also a custom WYSIWYG GUI editor. Backend consists of multiple services (application service, cryptography, autentization, DMS...) and custom ORM. Everything written mostly in C#. There are also many client apps consuming these APIs and I have started to work on a client in the Silverlight technology. It is something like a WPF app run in a browser in the .NET runtime provided by the Silverlight plugin (Heard of FlashPlayer? This is the Microsoft's clone.).

After a year or two I have moved from backend and Silverlight to the development of a brand new SPA HTML5 client written in TypeScript. Client app is a part of the framework. The app basically just takes a definition of a page created in WYSIWYG editor and business data and renders interactive web page in the browser. Without any coding.

Shortly after the transition I have taken up a role of a frontend software designer which included responsibilities like definition of used technologies and principles used throughout the codebase and also management responsibilities regarding other developers working on the codebase.

SPAs are fun. It is a really challenging area as it is nowadays becoming as complex as the backend might be. But on the other hand you can create an app which is really ergonomic and great to work with. And you can feel it and users can feel it. We are using the newest technologies and bleeding-edge features introduced in browsers like Service Worker, Web Workers, Web Components and others. Lately we are transitioning from vanilla JavaScript and Custom Elements to React components and Redux state management.

I believe in web technologies, they will be with us for a long time.

Currently working on a personal project

FireFairy is a personal wishlist PWA (progressive web app). I am building it with TypeScript (ofcourse) and the React/Redux combo. I am aiming for full capabilities presented as PWA pillars (e.g. the installability and desktop-app-like feel). Backend provides a REST API build on serverless functions powered by Google Cloud Platform. Data is persisted in a Firebase NOSQL database. Not sure if I'm going to release sources to the public yet. Time will tell.

Currently learning React/Redux

I am working on improving my functional and composition skills. React and Redux are built on quite simple principles but an overall design of an app using these principles is something else. There is always a way to design it better. And there is always one more gotcha or a feature to learn!

My open source projects

Games

Fast-paced 2D action single and multiplayer arcade-like game. C# indie-game game 2d-game multiplayer-game arcade-game

Desktop app which aids with various tedious tasks in a game Tribal Wars. Java bot tribal-wars

Variation of Google's minigame Zerg Rush. Defend your Cargo and kill all Zergs! TypeScript typescript-course zerg-rush gamification es6

Tools

App for management of subtitles in a video library. C# subtitles subtitles-files kodi plex

Tool for frequent backups of a few files. C# backup backup-utility backup-tool

Batch text file charset re-encoding CLI utility C# encoding text-encoding cli-utility

Azure DevOps Tools

Chrome extension creating a HTML page formatted for print from any Azure DevOps Server query. JavaScript tfs azure-devops chrome-extension workitem print

Deno web service which can validate the title of a pull request in Azure DevOps Services and informs it about pull request's validity. TypeScript deno pullrequest tool azure-devops pullrequest-validation

Pullrequest Watchdog is a web app for watching pullrequests in Azure DevOps repository. TypeScript azure-devops apollo react graphql mongodb

Templates

WebPack configuration template for building TypeScript apps with multiple target environments. TypeScript JavaScript webpack configuration example

Configuration template for Azure DevOps extension development with the use of TypeScript and React. Also enables local development. TypeScript azure-devops-extension vss-extension vsts-extension typescript react local-development template

Other

Script controlling a servo motor in a DYI fish feeder. Python raspberry-pi fish-feeder servo-motor

vsts-react-extension's People

Contributors

ecl1ps avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vsts-react-extension's Issues

mange multi html files for the extension in vsts-react-extension

hey

I am wondering if there is a way to mange multi html files in the react sample extension, in case my extension appears in many places in the Azure Devops.

Before I used this approach from microsoft/
azure-devops-extension-sample, but right now the npm packges are not compatible, so I can't use webpack in the extension.
probable the best way to use react-scripts instead.

As I can see, the extension in your example has only one html file, supposing that the extension will appears only in one place in Azure Devops.

any ideas can help me?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.