Us Table Of Contents Saving Documents, Save As, And Templates File Locations &Amp: Fill & Download for Free

There are certainly a lot of languages and for everyone a lot of frameworks... Not to mention the myriad of tools and environments that we can use...We will avoid making the complete list, otherwise it will take weeks, but at least let's talk about some of the most used...—————————————————————————————————————I/ The back endThe backend is what will be executed on the server side. Basically we retrieve data from the database, process it and send it to the front-end, which is what the user will execute in his browser.Many back-end solutions offer their own integrated front-end solution. That is, it si not mandatory to separate the two. The back-end has HTML document templates, which it can modify with the framwork’s "template language" and return as an HTML document (+CSS and scripts) for each page.Today, the trend is more towards separating front-end and back-end in two different applications. This makes it possible to create 100% front-end interfaces that are very dynamic and to minimize the data that circulates between the two (via a API) once the first loading is done.However, the traditional template language solution remains relevant for low-dynamic sites where it is not necessary to run a lot of JavaScript.To get around it quickly, we will adopt a scoring system. Not everyone may agree with the notes. I didn't use all these technologies and so I synthesized what I understood from my own research. Feel free to share your point of view and your experience in commenting. If there is a consensus I will adjust accordingly.Regarding the criteria I will propose:Developer productivity, which represents the time that a developer familiar with the framework will spend creating the site, compared to other solutions. This is often the most important criterion these days.Saving server resources, which is only relevant for large sites using full capacity servers. Note that we do not speak of speed because most often it is the database that slows down the execution the most, because of disk access. This is obviously less true with a good use of the cache in RAM when the sites allow it. This also means that in general, the human cost is much more important than the cost of servers.I.1 / The heirs of the first wave of back-endsThese are the solutions used today that come from the first wave, before the specialized front-end frameworks. At the time PHP and Java ruled the web as a master. They remain the leaders even if they have lost popularity.The Traditional CMS such as WordPress and Drupal (written in PHP). It is still the most commonly used option to make simple sites, such as corporate showcase sites or blogs. Since all these sites are similar, most of the code is reusable. We have a turnkey site, with an administration interface to write the articles in addition, where all that remains is to customize the appearance.Developer productivity: +++ for a standard showcase site that follows the CMS architecture with little additional development. Any further development deserves a simple +.Saving server resources: +The PHP frameworks, including Laravel that is currently the most popular. Before him it was French. Symphony, which is still a little more difficult to handle than her little brother. Another very popular framework being CodeIgniter, which has a very small footprint on server resources. Etc. There's a whole bunch of them.Developer productivity: ++Saving server resources: +For enterprise applications, the most widely used language was (and still is due to its history): Java. It is a much more verbose language, therefore less productive to write code, but much faster to execute than PHP, which is an interpreted language. Java itself is compiled and cross-platform, thanks to a compatibility layer: the Java Virtual Machine. There are a lot of Java web frameworks. Spring, Play, JSF.... It is worth noting that Spring Boot. If you know a little bit about Java and want to deploy a relatively standard application as quickly as possible, with a minimum of code, Spring Boot configures you everything in the blink of an eye.Developer productivity: + (except Spring Boot)Saving server resources: +++I.2 / The second wave of back-endsThe second wave is characterized by a search for increased productivity in web development.The founder of the second wave is undoubtedly the language Ruby and its framework Ruby on Rails. It is a huge craze for this language with its minimalist and extremely readable syntax, so much so that those who do not know it can decipher the code. Rails, on the other hand, forces an "ordered" architecture in the form of a model-view-controller. Finally, it offers a whole bunch of bricks that are easy to assemble in a web application. Ruby on Rails appeals to startups and allows them to launch ambitious projects in record time. The only problem is that like PHP, it is an interpreted language that is rather resource-intensive and the fact of assembling bricks that are sometimes larger than the need makes them lose even more performance. Anyway, server resources are much cheaper than developers.Developer productivity: +++Saving server resources: +Then comes the moment of glory of specialized front-end frameworks, written in JavaScript, which is the only language that allows you to execute code directly in a web browser. We'll talk about it later. A lot of developers are trained in JavaScript. Despite the weaknesses of this language, they do not want to change. It's the massive landing of the environment node.js, which allows to execute JavaScript on the server, and the framework Express.js, which is the first in our list to be exclusively back-end. To be honnest, node.js is much less clean and less productive than Ruby on Rails. However, it has superior performance to Ruby and PHP, the best for an interpreted language but still far from Java. This helps its adoption on relatively large sites.Developer productivity: ++Saving server resources: ++Finally the third to make a crashing entry, is a language that does not come from the web: Python. Python has since seduced and established itself as the number one in the scientific community, particularly for data analysis, scientific calculation and artificial intelligence. Nothing predisposed Python, already old, to this, except that it is probably one of the easiest languages to read and write. Even more than Ruby. While Python flirts with Java on the line of the most used languages in the world, all sectors combined, very large sites are created with its framework Django, like Youtube, Instagram, Disqus, Spotify, Dropbox, Quora... The use of a language interpreted for these big platforms may seem surprising, but Django allows an unequalled productivity, with everything that is already included in it and an excellent robustness. It has a faire value when we know that the most costly is development time. For small sites, since it is the reading and writing to the database that slows down applications the most, Django is even an ideal choice. In addition to Django, Python has many frameworks including the very popular Flask. A minimalist framework that does not embody anything useless and on which other bricks can be added.Developer productivity: +++Saving server resources: + (sometimes +++ if well optimized)I.3 / The third wave of back-endsThese backends compete with Java while being less verbose, more pleasant and more productive when writing code. Not surprisingly, it is a big job to develop this kind of tool and it is very big companies that are behind these projects.Go! Yes, yes, it is the name of the language. Google was tired of having to choose between languages like C++: high-performance but very long to write and very dangerous to leave in the hands of inexperienced developers, Java: high-performance but verbose to write and belonging to Oracle, Python: very fast to write, adapted for prototyping but lacking performance for their big server side needs and more difficult to debug on large projects (not compiled, not typed). They therefore created a language that had to be productive, usable by inexperienced developers, consuming few server resources and fast to compile to progress by iterations. The result is Go. Since this language has everything needed for server-side development and Google's support was a guarantee of stability, it has grown rapidly and is now renowned for developing high quality backends, especially on large projects. Some will say that Go is so well equipped for the web that it doesn't need a framework. Maybe, well, it can save time so there's a small classification of frameworks on GitHub.Developer productivity: ++Saving server resources: +++We will go back in time and remind that Microsoft had already followed a similar approach with C#, which is also used for Windows applications. There is not so much buzz around this language yet it is much more used. Microsoft has developed a whole ecosystem for the web with ASP.NET. But above all, the big innovation that places us in the third wave is Blazor. We'll talk about it more on the front-end side, it's the first to run WebAssembly seriously.Developer productivity: +(+?) ←Your opinion?Saving server resources: +++I.4 / The fourth wave of back-endsThe third wave wants to have its cake and eat it too... Basically they want developer productivity worthy of Ruby or Python, but a speed of execution at least as good as Java. We're on the very latest emerging generation. The disadvantage is that it is less easy to find tutorials to help us. In this generation, we count in particular with:Elixir, with its framework Phoenix. The stated objective is to achieve Ruby's ease of writing code and an ability to handle the load that is superior to all its competitors. Elixir uses the Erlang virtual machine, known for its low latency, distributed and fault-tolerant systems. It can also be interpreted as Python or compiled as Go. A very practical approach because the first one is top during development and the second one in production. It is very clearly the rising star of the moment in the field of web development.Developer productivity: +++Saving server resources: +++Julia, a language born in and supported by the MIT, which is also a rising star but in the field of data sciences. Why talk about it then? Because Julia has the best just-in-time compiler (JIT) to date, with performance close to C and is even easier to write than Python, while having the ability to go down to low level in the system if needed. In short, on paper Julia has everything to become a great back-end language, but the team prefers to focus on data science and AI. Nevertheless, the community is developing a web framework: Genie.jl. The stated objective is to make it as simple and productive as Django, the reference in this field, while bringing Julia's speed of execution.Developer productivity: +++ (at maturity)Saving server resources: +++—————————————————————————————————————II/ The front-endII.1 / Templates, or "template language"This is the historical approach that consists in creating pages that mix HTML and back-end language, asking the server to generate an HTML file and send it to the front end.It was already possible to add JavaScript code to this HTML, which will be executed by the browser. The most popular JavaSript library for these uses is JQuery.This approach is still relevant for sites that require few dynamic bricks in JavaScript, as it will allow rapid development under these conditions.When you start entering sites like Quora, Facebook, or SaaS, it becomes totally unmanageable because we mix server code with JavaScript and JQuery shows its limits to make all the components of a complex application communicate with each other.II.2 / Single Page Apps written in JavaScriptThis is the "modern" way to develop an application. We totally separate the front end and the back end. The front-end becomes an application written entirely in JavaScript that is sent to the user's browser, which will interpret JavaScript itself. When the front-end application needs data that is on the server, it will request it from the back-end, which will provide it in the form of data JSON via a Web API using the HTTP protocol. Here are some of these frameworks. You have to know that front-end development is a bit like Game of Thrones for frameworks and that things can change in a few years...Angular: developed by Google, Angular has long been the undisputed emperor of front-end frameworks. Google's development strength has made it possible to reuse front-end code for mobile or desktop applications.React: Facebook has developed its own JavaScript Framework for its internal use and has gradually introduced it into Open Source. It turned out that React was easier to use and more productive than Angular, which allowed him to tickle the emperor to steal more than half his territory. React is now the number 1 JavaScript SPA framework, neck and neck with Angular. React also offers React Native for the development of mobile applications. It is used by companies such as Facebook, Instagram, Pinterest...Vue.js : A former Google engineer had some ideas on how to make Angular easier to use. He created his own Framework: Vue.js. The community very quickly became interested in this Open Source adventure and today Vue.js has nothing to envy Angular or React. It is supported by donations and companies, especially Chinese companies, such as Alibaba. It is a little easier to use than React, thanks to a large number of abstractions that avoid rewriting standard code several times. At the same time, some programmers find that we have a better understanding of what happens behind the scene when we use React. This is also true. For the moment, Vue.js remains the challenger, far below the other two. Some believe it will take off in 2020 and others that the ease of use and productivity provided by React is insufficient to make it a serious threat. The revolution would be to be expected from the next generation of frameworks... Unless React evolves fast enough not to be caught up.Ember.js: it is a relatively old framework, relatively little used compared to the others but which has been able to maintain itself and continue to progress. It is used by LinkedIn and Netflix, which are good references.Aurelia.js : it is a challenger, less known than the "3 big ones", which brings less functionalities than them but which sought simplicity.Mithril.js : a very small Framework, very fast to load. A good option if you are running to make a minimalist fast site or by encoding more in pure javaScript.Svelte.js: brings an interesting innovation: it is transposed in very light JavaScript base. It is also relatively easy to use. Comparable to Vue.js.Polymer.js, had been created by Google to anticipate the arrival of standard Web Components and offer Polyfills to make their use possible on any browser. Note that most large frameworks also allow to create Web Components.Meteor.js: is a full stack framework. That is to say, it allows both back-end and front-end operations.Backbone.js is an "old" framework (2010) that was innovative in its time. It is rarely used nowadaysII.3 / Languages transpiled in JavaScriptIt's no secret, many developers who come from other languages don't like JavaScript. The transition to ES6 version wanted to provide more traditional syntaxes compared to other object-oriented languages, but also created a rather messy two-level language. There are also a lot of little subtleties that can create bugs where you don't expect them. Obviously, when you compare it to a very clean language like Python or Go, you complain... But there is no choice for the front-end. JavaScript is the only language that web browsers can understand.Some have therefore tried to launch derived languages that are converted to JavaScript before being sent to the browser.TypeScript : In JavaScript, you do not declare the type of your variables. For example "let a" can be a number like a string, and you can change on the fly between the two. The problem is that some functions are waiting to have a particular type. If you use the Cosine function and you send it a string it will make a fuss... When you code several people or when the program starts to be long, you quickly make the mistake of reassigning a different type to a variable, which will result in a serious problem in another part of the code. That's why MicroSoft created TypeScript. It's just JavaScript, but we declare in advance the type of variables and we are warned if we try to change them later. Being "just JavaScript with typing", TypeScript can be used with most of the frameworks described above. In practice, TypeScript is widely used.Dart, with the framework Flutter and Flutter for Web. Dart is a language developed by Google with a syntax closer to C or C#, which has the advantage of being relatively clean. It allows to make with the same code mobile applications, desktop or web front-end. This is a recent technology that will probably continue to grow for some time. For the moment, the web version is still under beta test and lack SEO compatibility.Elm: it is a language but also almost a Framewok on its own, with its own implementation of the virtual DOM. Elm has been the pioneer in several concepts used today in frameworks such as React. Elm is quite simple to understand and productive.II.4 / WebAssemblyWebAssembly allows applications to be compiled and executed in the user's browser, regardless of the user's execution system.For the moment WebAssembly does not know how to handle the DOM and must therefore remain coupled to JavaScript, which is not compiled. We'll see if it continues like this for the long haul. There are many people that want 100% WebAssembly web applications written with their favorite language, without having to use JavaScript....Blazor, is the first framework to take advantage of WebAssembly. It allows you to write entirely in C#, whether it is the back-end or the front-end. Come on, it's not just JavaScript... It also benefits from all the power of ASP.NET, to which it is attached. Blazor is the first framework to deploy the potential of WebAssembly. It does this by directly compiling C#. Of course, when WebAssembly can't be used, Blazor brings out the good old JavaScript under the hood. Blazor relies on well-supplied standard component libraries to increase developer productivity.What about the others? It may well be that WebAssembly integration is the hallmark of new generations of frameworks and that it allows front-end developers to choose their language. Examples include experiments Vugu (Go), SwiftWasm (Swift), Yew (Rust), TeaVM (Java, Kotlin), Pyodid (Python) or Wasmer, which would allow to compile different languages in WebAssembly.—————————————————————————————————————III/ Database management systemsDatabases are used to store your website information in an infrastructure optimized for simultaneous read/write by many users, while ensuring data integrity. Yes, because having 10,000 users reading a single file on your server is not a problem, but having 10,000 users writing in it at the same time is just unmanageable. Databases also allow complex data operations, such as joints or graph crossings, which makes them usable for a little more than their raw display on the screen.It should be noted that read/write to disk is the most important thing that slows down a website apart from the problems related to data transfer. The choice of the type of database, the design of its architecture, are therefore important points for the performance of a website. On the other hand, the choice of a programming language will only be felt from a much higher number of visitors.The relational databases, generally managed in SQL. These are the most commonly used. To the point that other technologies are often called NoSQL (Not only SQL). They allow the best performance in reading and writing and the structured organization of the content provides a clear vision of the code.The most popular Open Source option is MySQL, managed by Oracle, or its derivative MariaDB was created following concerns that Oracle would withdraw the open source license from MySQL, and used by Wikipedia in particular.The most common alternative is PostgreSQL. Between the two you will only see the difference in extreme load cases. Situations in which the two solutions have different advantages. Postgres is used extensively with Django.Microsoft SQL Server is probably the most common option in corporate IT systems. There is a free version that meets most basic needs.SQLite is a database system that writes to a. It is not designed to support a large number of simultaneous writes but is fast in reading and minimalist in terms of installation. This system is often used in data science, at the time of development or for databases where only a few administrators write.The Key-value databases are ultra simplistic. A key, a value. Period. The advantage is a very fast reading when you know the key. Many databases that offer key-value systems are also document databases, which will be discussed in the next paragraph. However, there are pur-players, most of which are random access databases that focus on speed.Redis, a database in RAM that is widely used as a cache system to speed up the display of website pages, but also allows persistence on disk by an incremental system.The other big name in this market segment is MemCached.The document databases allow data to be stored with an undefined tree structure and rendered in standard formats such as XML or JSON. They are increasingly used because they make it easy to store any object, especially JavaScript objects, with a minimum of rewriting. However, data cross-referencing operations can be a little slower.MongoDB is the undisputed leader in the field today.CouchBase is a popular system offered by the Apache Foundation.Each of the major clouds now offers its own document-oriented database service:DynamoDB, on Amazone Web ServicesCosmosDB on Microsoft Azure (actually multi-model)Firebase Realtime Database, Firestore, or Google Cloud Datastore, on Google services.Relational databases have not been insensitive to the success of MongoDB. Most of them, like MySQL, MariaDB, PostgreSQL and Microsoft SQL Server now offers to store documents in JSON.A type of graph databases that use RDF, also known as TripleStores and QuadStores are designed to support the semantic web. A triple is in Item / Property / Target format. For example: John / is a friend / Mike. In Quads, a column is added to specify that a triple provides details about another triple and define subgraphs. To reconstruct the page about John, we look for all the triples that start with John and his sub-triples. This model is quite fast in practice, whether it is to display the page of an Item or to make graph crossings. On the other hand, compared to a document-oriented model, we have multiplied the number of times we write John. The result is that these databases can take up a lot of memory space. Among the known names:Virtuoso, which propels in particular DBPedia.MarkLogic offers document + RDF.Apache Jena is a framework dedicated to the semantic web that allows you to transform a relational database into an RDF database and also offers its own solution.GraphDB, a commercial system with a very nice graphical interface.Blazegraph, which propels Wikidata.Another type of graph databases, wich is becoming the most popular, is the "labeled-property graph". It is a network of nodes and connections that each have a list of properties. This system is memory intensive and power-consuming but extremely powerful to evaluate the relationships between data. We used it for example in the Panama Papers case to unravel fictitious corporate networks.Neo4j is the leader in graph databases. It is a system written in Java that offers a very wide range of tools.Others are for the most part multi-model databases, such as CosmosDB, OrientDB or ArangoDB.Amazone Neptune also supports RDF format.There is a newcomer who deserves to be mentioned, it is the RedisGraph. This Redis-based system resides in RAM, which makes it extremely fast, with a disk-based persistence system. This speed is further improved by the use of adjacency matrices. RedisGraph thus compensates for the main weakness of graph-oriented databases, as long as the data can enter the RAM, which is most often the case.Multi-model databases are database management systems that mix several data models. The systems below can behave like all the systems described above.Oracle Database is undoubtedly the leader in commercial databases and can be used with relational models, document, graph and RDF.CosmosDB is the Microsoft solution for the Azure cloud.OrientDB is an Open Source system written in Java that is compatible with a large number of query languages.ArangoDB is written in C++ and is open source, but has its own query language.Another type of database that should not be ignored is the "Wide column store" system. It is a system close to relational databases but allowing structural changes within a table. They are widely used in the big data.HBase and Cassandra are Open Source solutions offered by the Apache Foundation.CosmosDB, in the Azure cloud, also supports this format.The Google cloud solution is Bigtable.Etc. We didn't talk about the distributed database management, nor reviewed all the query languages, but it's already very long so we'll stop there... An excellent site to look at database management solutions is db-engines.com.—————————————————————————————————————IV/ HostingWe're gonna have to put that code somewhere. Many suppliers such as AWS, Azure, Google Cloud Platform, Digital Ocean, Heroku, OVH, offers solutions to host your application in their data centers. You can of course do this at home as long as you have a fixed IP, but the speed of your internet line will strongly penalize the performance of your site from the moment you use it.The shared web hosting is often the easiest way to get started. Basically a host provides a large server and installs a control panel with a graphical interface. It then sells access to this interface, with disk space quotas and isolation between users. The big flaw of these hosts is that you can't install everything and anything on the server. You have to deal with what you are given. In practice, these hosts are useful for running sites, based on popular solutions such as PHP and MySQL, with CMS such as WordPress.The Virtual dedicated servers (VPS). Now we are starting to get into something more serious, while remaining economical. Basically the host will provide you with a Linux or Windows Server on a virtual machine running on one of its large servers. With these solutions you can control everything. Some hosting providers even offer ready-made environments with the software you will need installed, as can be seen on the marketplaces Digitial Ocean and Heroku, who also offers to take care of keeping them up to date.Cloud platforms, like giants Amzone AWS, Microsoft Azure and Google Cloud Platform or smaller ones like Heroku or the OVH Public Cloud. They also generally provide access to VPSs, as well as a very comprehensive set of specialized tools. We're getting into serious things for the deployment of large applications. Large clouds full of options are usually quite expensive compared to a small, simple VPS at OVH, for example. In general, virtualized solutions such as cloud platforms and simple VPS are now the most popular, allowing hosting providers to better manage the use of their servers."Bare-metal servers". You rents a physical server with a given location in a data center. This solution is less and less frequent because it is expensive and offers less services and flexibility than clouds. However, it will have advantages in terms of performance stability for some critical applications.—————————————————————————————————————V/ The server architectureServer architecture is a tricky subject when you touch very large sites that make a lot of traffic. You will need specialists who are familiar with their work. But in the meantime you can still deploy your sites yourself with some knowledge in the field.Web panels are graphical interfaces that allow you to manage a web server provided you use the most common technologies. In my opinion, this is especially practical when you want to provide shared web hosting. These include the following cPanel, Plesk or Webmin, which is free. I've tried. On a small personal VPS server it doesn't make your life that much easier, except if you install a very light panel like VestaCP.Pre-configured VPSs, such as droplets of Digitial Ocean and the buildpacks of Heroku. Everything is done on the command line but the environment is already ready and these services often offer simplified orders or guides.Docker Compose allows you to write in advance to a file what you want as an environment and deploy it in one click. It takes a little time to fully understand Docker but personally it's my preferred solution. This allows you to have a complete overview of your environment at any time, to change it by modifying a few lines and each service is isolated in a container, which avoids unfortunate interactions between the different sites. Last but not least, it provides an almost identical development and production environment, limiting the risks of "yet it was working on my machine" at the time of deployment.Kubernets, a few notches above, allows you to orchestrate container that can be distributed or replicated on several machines and manage scale-up by automatically deploying the appropriate resources. This is a complex solution that requires in-depth knowledge of server administration.Most large clouds offer, in addition to VPS, a multitude of specialized services that they manage themselves and that you can access via an API. These approaches have the advantage of simplifying your life while allowing maximum flexibility. One platform of this type that is being talked about a lot right now is Firebase, bought by Google.—————————————————————————————————————VI/ HTTP serversmost often behind websites, machines discuss using the HTTP protocol. It will be necessary to serve and receive content according to this protocol. That's the purpose of a server.A small aside, we often make a big deal about the comparisons between the speed of different web servers. Unless you design a site with very high traffic, milliseconds of server processing time is certainly the least of your worries. It is better to focus on a practical solution.Apache Httpd has long ruled as a master. He can do everything, even coffee. If you don't know what to choose, it's often a good solution.NGINX has caught up with Apache thanks to its exceptional performance in serving static files. Today the two share the market for Open Source solutionsIIS, Microsoft's server is not the most popular but the quality of the environment ASP.NET for web development is making it more and more used.Apache Tomcat is a server used for Java sites.Express.js (with Node.js) integrates a web server for JavaScript backends.Lighttpd is an ultra lightweight server that can be useful on configs with limited resources.Caddy is a relatively new server that integrates the upheavals associated with the arrival of containers and greatly simplifies administration under these conditions.Between the server and the backend, a CGI, or "Common Gateway Interface" is usually required to allow them to interact. For example, for Python, the popular solutions that are generally coupled with NGINX are uWSGI and Gnunicorn.When you have several services on a server, it may be useful to set up a reverse proxy, which distributes requests to the right services and will often have a role of load balancing. We can mention for example:The solutions provided with the servers, such as NGINX reverse proxy and mod_proxy for Apache.Traefik, a solution to be coupled with containers, which simplifies the management under Docker once you understand how to configure it.—————————————————————————————————————VII/ CachingThe Caching allows the results of previous requests to be stored in RAM and reused by future customers without having to repeat the entire processing process at the back-end and database query level. Obviously behind this there is a whole strategy to serve fresh content if it changes in the meantime.MemCached and Redis are key-value databases that are placed behind the server and can store the result of requests in RAM in order to serve them later. These are very popular solutions.Varnish and Squid are HTTP caches that are placed at the front of the web server, in Proxy position, and intercept any request that has already been made recently to serve an already ready result. These HTTP caches can be used in conjunction with MemCached and Redis.Note that there is also a cache in the browser, but this is managed by each client's browser and not by the web developer.—————————————————————————————————————VIII/ And then... A whole bunch of development tools...We will resume the development stages based on the DevOps to structure this and not get lost. Don't worry, we'll keep an overview.Project management tools allow you to collaborate with several people around a platform, and to organize yourself. In practice, we will find many of the large forges and code repository and review platforms that are seen later. There are also standard project management tools. Most of these tools focus on agile development. It should be noted that there are more than 200 project management tools so we will focus on a short list.Jira is a reference in commercial software integrated into the code. It also allows the management of bug reports. The Altansian editor offers a large number of integrated tools for web developers.TargetProcess is a tool with many flow diagrams, timelines and data visualization, for those for whom the process is at the heart of the action. Beware that many engineers tends to overthink project management tools and that the most simple is the most usefull by the end.Asana is a generalist project management tool with good agile process management and a friendly interface.Wrike is a 100% generalist project management tool, but it can integrate elements of agile methods and query management.Trello is an extremely simple tool in the form of a Kanban, i. e. a table of cards with columns of the type: to do, in progress, done...The tools of user experience design, for the creation part. These are tools that allow you to create the interface based on your knowledge of cognitive ergonomics, a creation/testing/modification loop, an understanding of brand identity, feasibility and graphic skills.Wireframes creation tools. Wireframes are simplified representations of the website. These representations do not intentionally assume graphics. They describe the different components of the interface and their behaviour. Eliminating graphics avoids discussions during the information and interactivity architecture phase.Balsamiq Wireframe is a commercial reference software that integrates into Jira. It makes it easier for several people to collaborate around a model.Pencil is a good Open Source software to start creating Wireframes. It allows you to create links between pages and also includes options for drawing flow diagrams.Microsoft Visio which is rather a diagram creation tool but which has long been a reference for the creation of Wireframes.Software not made for this at all is also regularly used just because it is possible to make links between pages. We could mention the following Adobe InDesign, Affinity Publisher and Scribus, which are desktop publishing software (DTP), or the famous PowerPoint.A paper and pencil is another kind of software, very popular, especially when you are alone and don't want to get carried away.Generalist graphics tools, often used to transform the final Wireframe into a graphic representation.Adobe Photoshop was not at all suited to designing websites but since many graphic designers used it as a Swiss Army knife, it quickly established itself. The practical side of Photoshop is its layer system that allows you to easily retrieve images for integration.Affinity Photo, much cheaper, with a similar interface and almost as powerful.The Gimp, a very powerful Open Source version. The interface is a little less user-friendly but it is still very usable.Adobe Illustrator is a generalist vector drawing software that is sometimes used in Web Design. It is also a software widely used in product design, which means that designers with a product + services interactivity background may sometimes prefer it. In any case, it is the software used for logos or icons.Affinity Designer, much cheaper, with a similar interface and almost as powerful.Inkscape, an Open Source version. The interface is a little less user-friendly but it is still very usable.Realistic prototyping tools that allow you to create navigable graphic models directly.Moqups is a tool that has evolved quite a bit, from a simple Wireframe tool to the ability to create finished models.Adobe XD promises to make interface designs by assembling components as quickly as you make an initial Wireframe. Well, it's a little more complicated than that, but it can help. Adobe XD also offers a free version.ProtoPie allows the team to collaborate and discuss around a model with a finalized graphical aspect on which it is possible to navigate.Marvel App, which also offers a number of specialized tools on user testing.The tools that make the graphics and code.Adobe DreamWeaver is halfway between web design software and code editor. It makes it easier to design HTML interfaces, with drag and drop options for elements and automatic code generation. It is loosing popularity since it is not usable with modern JavaScript front-end framworks.Google Webdesigner is a free tool that allows you to create the interface with the code in mind and also work on it in parallel. In addition to the classic web design features, Google focused on the ability to create animations.The very versatile tools that allow you to do wireframes, graphics, realistic prototyping, code and often many other things...Sketch is a product that is gaining a lot of popularity. It is particularly suitable for designing modern user interfaces with tools designed according to the implementation that makes them. It is even possible to create graphics responsive, which show the evolution of the interface according to the width of the screen. Ergonomics is closer to modeling software, which is also a possible use. Sketch is finally much more economical than Photoshop. A small shadow on the picture, it is a Mac-only software.Gravit Designer is a similar Sketch software with a little less options, available in the browser and with a free version to start with.InVision is a very complete reference tool that goes from WireFrame to code generation, flow diagrams and graphics. It really contains everything that is necessary.MockupPlus allows you to create finalized interfaces by describing navigation and generating code snippets that can be used by developers. Ditto for Figma or Axis.The codeThe code editors (simpler) and integrated development environments, aka IDE (more complicated).Visual Studio Code is certainly the most popular and universal solution for web development. It is an advanced code editor, much simpler than large dinosaur IDEs but with modules to integrate with remote servers or development environments under Docker.JetBrain offers excellent quality IDEs that are sufficiently well documented to be almost easy to learn. There is a paid version and a more limited free version each time. It's worth it when you can buy it.Eclipse has long been the most popular IDE solution because it is free. It is a big monster that can take effort to be controlled.Netbean is a kind of similar monster created by the Apache Foundation.Sublim Text is a fairly simple code editor that can be convenient to have on hand. Atom is very similar, developed by GitHub.Brackets is another code editor that is growing popular since it is specialized towards web development.Cloud9 an online IDE that has been bought by Amazon and now allows you to edit your code online on AWS servers.Eclipse Che is an online version of Eclipse that offers you to host your code on temporary servers launched with Docker Compose. The free offer is more than generous. The only disadvantage is that you have to wait until the docker container is up each time you restart it.CodeAnywhere is a similar approach, with something easier to learn but a more limited free offer. The little extra is the application for tablets and smartphones.Some devs who started programming before the dinosaur age still like to use Vim or Emacs, text editors in the terminal. Even if you don't want to develop on it, it's good to know how to use it for system administration.Etc. There are tons of them... Some of them specialized in certain languages.Version control tools allow you to store different versions of code at different stages of development and work together.The most popular one these days is Git. It was created by Linus Torvalds, a little known guy. It is a relatively simple format that has the advantage of being able to work in peer-to-peer between developers without requiring a central repository. In practice, however, there is often one of the deposits that is considered as the central one.Before him SVN was a very popular system. It is still widely used today. To run it it is necessary to implement a central repository on a server that is designated as the central repository.The biggest challenger is certainly Mercurial. It is a robust decentralized system. Among its users are Facebook, the W3C and Mozilla.The online code repositories that allow multiple developers to work on the same program. In practice, they often include additional features to support collaboration. These range from simple tools to code review that allow several people to get behind a platform, to reread and discuss the code... To the huge computer forges, which centralize all the necessary project management tools.The one you will hear most about is certainly GitHub. This is the reference repository used by Open Source projects today. It is both relatively simple and flexible.Gitlab is often considered as the alternative. It is also a very popular solution for private corporate projects.SourceForge is a complete platform that is known to host a large number of free software to download.Altassian, a leading provider of solutions for development companies, offers Crucible, dedicated to the review of source code and BitBucket, a complete solution.Trac and Redmine are very large Open Source forges that have existed for many years, to be installed on its own server.Phabricator is a slightly more modern and lighter version, which is notably used by the Wikimedia Foundation for Wikipedia and its sister projects.Anyway, it's time to set up the unclassifiable Azure DevOps Services. It is a recent Microsoft solution that provides access to all the necessary tools throughout the software's life cycle, when following a structured approach of DevOps. It is free for Open Source projects. So, I'll stop you right away... For a personal project unless you're addicted to DevOps it may be better to stay on GitHub. Azure DevOps Services is especially relevant for large projects in structured teams.Here we will start to enter into concepts of structured modern development. Continuous integration is the implementation of an automated process for the compilation, the tests : unitary, integration, system, functional, regression, performance....Jenkins is a very popular and complete solution that we often hear about...Travis CI is a solution that integrates well with the Open Source and GitHub projects.There are many solutions. Examples include, for example CircleCI, Buddy or TeamCity. We also have to include language specific libraries.Finally comes the first deployment in a pre-production environment called staging environment. If necessary, we will make the binary objects available in repositories called artifact repository. For example, we will be able to carry out user tests, e. g. usability tests, with the intervention of the UX team or load tests on a real environment. This is where we check the commercial viability of the product so it is better not to skip this step when there have been significant changes.There are dozens of different types of tools dedicated to User Experience.UsabilityHub for example, allows you to track first clicks and mouse movements, conduct surveys, evaluate preferences between multiple visuals or collect users' impressions within the first 5 seconds.Hotjar offers similar tools with conversion tunnels and feedback tools to integrate into the site.Inspectlet allows you to have advanced user tracking tools, including eye movement tracking.Loopback allows you to have remote test sessions with users by recording their screen.Etc. Adobe presents an interesting article with the main user test methods.Load test tools include, for example WebLoad, LoadNinja, Smartmeter, LoadView, JMeter...After validation, we will finally be able to deploy the code in the production environment. This can range from simple "git push" to the use of tools such as Application-release automation such as BuildMaster or Visual Studio Release Management. There is an interesting list in this article. The use of an architecture based on containers helps to simplify development.When the application is in production it is not finished....There is the monitoring, which makes it possible to monitor how the project is progressing in terms of quantified indicators. Many open source tools, sometimes integrated into the operating system, meet basic monitoring needs. There are also large commercial suites.Typing “top” on the command line in Linux will already give you a lot of information about the current processes. ”htop” is a more advanced version to install. "iotop" allows you to see the disk accesses.Monit is a very popular and open source solution for Linux servers.Nagios is an open source tool with a premium version. The Open Source version already meets many needs very well.UpTIme is a commercial tool that has the advantage of being both simple to use and powerful. A characteristic that is often forgotten.SolarWinds is not cheap but it is a popular solution that can do a lot of things. It has several tools at its disposal to identify bottlenecks and improve processes.NetCruch is a complete suite for server monitoring.Cula offers a fairly substantial free offer.Etc. There are many...The end-user experience can be evaluated using dedicated tools already described above and data from some monitoring software. We will also join marketing with precise tools for tracing the customer's acquisition and journey. For example, we rely on tools such as Google Analytics, Adobe Analytics and even open source tools such as Piwik.Of course you are not obliged to deploy all this arsenal for a small personal project... It is still recommended to write automated tests and carry out user tests, even basic ones, to realize that users do not necessarily think like us and that it is better to be extremely simple and clear when designing an interface…—————————————————————————————————————VIV/ Some suggestions to get startedI suggest some possibilities to get started. They are not necessarily the best and your case probably deserves a more in-depth analysis than these few lines, but it can give you some ideas.To create a showcase site for Aunt Lucie who is launching her cat grooming activity... Well don't bother and take a service where there is no need to code like Wix or WordPress.com (hosting based on WordPress technology). Yes, I know, it's bad, but at least she'll manage on her own....To create a small business showcase site or a blog with a little customization, a Traditional CMS will do very well and in particular WordPress, which is the most used (1/3 of the websites) and offers a lot of plugins and themes that save a lot of time. For hosting, a small shared server with a control panel at a traditional hosting provider will do very well.To create a shop... It's complicated to develop a shop from scratch... There are services that manage all the technology for you as Shopify. Concerning CMS there are for example WooCommerce, powerful and easy to use, which couples with Wordpress, and Magento, for big shops. You can put your shop on a good shared server to start with but on large shops you will need a little more serious customization.To quickly create a non-classical website, alone or with a small team...For the wireframe a paper and a pencil remain sure values when you are alone, or Pencil in a small team. I mean, if you're a pro team, a pro team, a designer UX will not cost you so much and will avoid great disillusionment during user tests that will make you lose much more money than you thought you had earned by avoiding it....For the graphic part, if you are alone you can use web components from standard libraries such as Bootstrap or Material UI. The site will be a little flat, flat, but clean. Otherwise, either you trust your talent or... a UX designer.As a code editor, Visual Studio Code is free and works well for almost everything. It is a lightweight editor that will be easier to learn than a Visual Studio or a Eclipse. Alternatively for Python some will prefer PyCharm.As a source code management tool, Git + GitHub is the most popular solution for Open Source projects and it is now possible to have private repositories for free.What seems to me to be the most productive for the back-end is Django. It has all the necessary tools on board and is written in Python, which is by nature very productive.If the application can benefit from the functionalities provided by a headless CMS (purely backend), it is better not to deprive yourself of them. We'll save time by not reinventing the wheel. It's the flat named DjangoCMS which for a long time was the most popular but nowadays it is probably Wagtail which is the most modular and saves the most time.Then for the front end....if I had very little dynamic content I would take the Django's Template language from a site model using Bootstrap. At worst some components JQuery, to slider it for example.If I needed to create a dynamic user interface that required JavaScript, I'll take React. React's choice is personal. This can always be discussed versus Vue.js, which is a good alternative, less popular but probably a little simpler.For hosting, the simplest is a Django Droplet on DigitalOcean or equivalent. Personally I prefer to have my hands on the architecture with Docker Composes on a virtual private server.If the mobile application is very important React native allows you to do it well with the same stack. However, it requires some rewriting. Flutter, a mobile framework written in Dart, allows you to do everything with the same code thanks to Flutter for Web. It is considered less productive than React but this would be compensated by writing the code only once for the web and mobile. This might make me want to try it in this context.If the team is large and/or the site could be very popular and resource intensive:You must have a UX team or you have hired an agency.For the code editor each dev has its preferences. If the team is large you probably have a structured development environment with a DevOps approach.We arrive for the back-end precisely at the why and how Go was developed by Google. Go will be easier for the team to debug and less greedy for servers than PHP or Python. But it all depends on the specific need. At this stage, a detailed analysis prevails.For the front end we could keep React, which is well suited for large projects, while paying attention to optimization.For the server architecture it is better to contact people experienced in these subjects. Kubernet is popular on these uses.And if... If I wanted a little adventure in the lands of the wizards who are preparing the world of tomorrow, I could choose Elixir with Phoenix for the backend.And if I am a hothead who wants to be among the first adopters in 2019 and that in addition I had needs in data science or scientific calculation, I would take Julia with the framework Genie.jl. It is likely that within a few years this will be a popular choice for sites that rely heavily on data science.X/ End!Are you still here?I probably forgot a few things or maybe a typo slipped in. Tell me and I'll correct it...I'm happy if it helped you. In any case, it allowed me to take stock. If you have read everything, don't hesitate to tell me in commentary, so I know that at least one person has done it! ! ;-)

This definitely gonna take 2 months of preparation. But i will guide you on how to clear the exam in first go like i did for my aws and azure certifications.Go through freecodecamp (Free full online course) or go through any paid course if you would like to from good instructor. This preparation will help you gain knowledge on overall aws services and their uses.Practice tests (Most important part in last 2 weeks of preparation) :Learning only from online course and not practicing exam questions will definitely puts you in trouble I suggest taking exam questions from skillcertpro site. They have very good set of practice questions for all certifications. They provide in depth explanations and reference links to help you understand each question. Go through all practice tests from skillcertpro. Try scoring above 85% and you are ready to attempt real exam.You can find most of the questions from skillcertpro on your real exam. :)you can get AWS Solutions architect exams here : AWS Certified Solutions Architect Associate Exam Questions 2020I have just followed above 2 steps and cleared my AWS SAA and AZ-900 and AZ-103 certifications.I wish everyone good luck for your preparation and exam.The AWS Certified Solutions Architect – Associate exam validates technical expertise in designing and deploying scalable, highly available, and fault-tolerant systems on AWS. Take this intermediate-level course to learn how to prepare for the exam by exploring the exam’s topic areas and how they map to architecture on AWS and to specific areas to study.AWS Solutions Architect Associate Course ObjectivesIn this course, you will learn to:Navigate the logistics of the examination processUnderstand the exam structure and question typesIdentify how questions relate to AWS architectural conceptsInterpret the concepts being tested by an exam questionAllocate your time studying for the AWS Certified Solutions Architect – Associate examAWS Solutions Architect Associate Intended AudienceThis course is intended for:Solutions architects who are preparing to take the AWS Certified Solutions Architect – Associate examCreating Data Access Layer for the ApplicationRight-click on BlazorWithFirestore.Server project and then select Add >> New Folder and name the folder as DataAccess. We will be adding our class to handle database related operations inside this folder only. Right click on DataAccess folder and select Add >> Class. Name your class EmployeeDataAccessLayer.cs.Put the following code inside this class.using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using BlazorWithFirestore.Shared.Models;using Google.Cloud.Firestore;using Newtonsoft.Json;namespace BlazorWithFirestore.Server.DataAccess{ public class EmployeeDataAccessLayer { string projectId; FirestoreDb fireStoreDb; public EmployeeDataAccessLayer() { string filepath = "C:\\FirestoreAPIKey\\blazorwithfirestore-6d0a096b0174.json"; Environment.SetEnvironmentVariable("GOOGLE_APPLICATION_CREDENTIALS", filepath); projectId = "blazorwithfirestore"; fireStoreDb = FirestoreDb.Create(projectId); } public async Task<List<Employee>> GetAllEmployees() { try { Query employeeQuery = fireStoreDb.Collection("employees"); QuerySnapshot employeeQuerySnapshot = await employeeQuery.GetSnapshotAsync(); List<Employee> lstEmployee = new List<Employee>(); foreach (DocumentSnapshot documentSnapshot in employeeQuerySnapshot.Documents) { if (documentSnapshot.Exists) { Dictionary<string, object> city = documentSnapshot.ToDictionary(); string json = JsonConvert.SerializeObject(city); Employee newuser = JsonConvert.DeserializeObject<Employee>(json); newuser.EmployeeId = documentSnapshot.Id; newuser.date = documentSnapshot.CreateTime.Value.ToDateTime(); lstEmployee.Add(newuser); } } List<Employee> sortedEmployeeList = lstEmployee.OrderBy(x => x.date).ToList(); return sortedEmployeeList; } catch { throw; } } public async void AddEmployee(Employee employee) { try { CollectionReference colRef = fireStoreDb.Collection("employees"); await colRef.AddAsync(employee); } catch { throw; } } public async void UpdateEmployee(Employee employee) { try { DocumentReference empRef = fireStoreDb.Collection("employees").Document(employee.EmployeeId); await empRef.SetAsync(employee, SetOptions.Overwrite); } catch { throw; } } public async Task<Employee> GetEmployeeData(string id) { try { DocumentReference docRef = fireStoreDb.Collection("employees").Document(id); DocumentSnapshot snapshot = await docRef.GetSnapshotAsync(); if (snapshot.Exists) { Employee emp = snapshot.ConvertTo<Employee>(); emp.EmployeeId = snapshot.Id; return emp; } else { return new Employee(); } } catch { throw; } } public async void DeleteEmployee(string id) { try { DocumentReference empRef = fireStoreDb.Collection("employees").Document(id); await empRef.DeleteAsync(); } catch { throw; } } public async Task<List<Cities>> GetCityData() { try { Query citiesQuery = fireStoreDb.Collection("cities"); QuerySnapshot citiesQuerySnapshot = await citiesQuery.GetSnapshotAsync(); List<Cities> lstCity = new List<Cities>(); foreach (DocumentSnapshot documentSnapshot in citiesQuerySnapshot.Documents) { if (documentSnapshot.Exists) { Dictionary<string, object> city = documentSnapshot.ToDictionary(); string json = JsonConvert.SerializeObject(city); Cities newCity = JsonConvert.DeserializeObject<Cities>(json); lstCity.Add(newCity); } } return lstCity; } catch { throw; } } }} In the constructor of this class we are setting the GOOGLE_APPLICATION_CREDENTIALS environment variable. You need to set the value of filepath variable to the path where the JSON service account key file is located in your machine. Remember we downloaded this file in the previous section. The projectId variable should be set to the project id of your Firebase project.We have also defined the methods for performing CRUD operations. The GetAllEmployees method will fetch the list of all employee document from our “employees” collection. It will return the employee list sorted by document creation date.The AddEmployee method will add a new employee document to our “employees” collection. If the collection does not exist, it will create the collection first then insert a new document in it.The UpdateEmployee method will update the field values of an already existing employee document, based on the employee id passed to it. We are binding the document id to employeeId property, hence we can easily manipulate the documents.The GetEmployeeData method will fetch a single employee document from our “employees” collection based on the employee id.DeleteEmployee method will delete the document for a particular employee from the “employees” collection.GetCityData method will return the list of cities from “cities” collection.Adding the web API Controller to the ApplicationRight-click on BlazorWithFirestore.Server/Controllers folder and select Add >> New Item. An “Add New Item” dialog box will open. Select Web from the left panel, then select “API Controller Class” from templates panel and put the name as EmployeeController.cs. Click Add.This will create our API EmployeeController class. We will call the methods of EmployeeDataAccessLayer class to fetch data and pass on the data to the client side.Open EmployeeController.cs file and put the following code into it.using System;using System.Collections.Generic;using System.Threading.Tasks;using BlazorWithFirestore.Server.DataAccess;using BlazorWithFirestore.Shared.Models;using Microsoft.AspNetCore.Mvc;namespace BlazorWithFirestore.Server.Controllers{ [Route("api/[controller]")] public class EmployeeController : Controller { EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer(); [HttpGet] public Task<List<Employee>> Get() { return objemployee.GetAllEmployees(); } [HttpGet("{id}")] public Task<Employee> Get(string id) { return objemployee.GetEmployeeData(id); } [HttpPost] public void Post([FromBody] Employee employee) { objemployee.AddEmployee(employee); } [HttpPut] public void Put([FromBody]Employee employee) { objemployee.UpdateEmployee(employee); } [HttpDelete("{id}")] public void Delete(string id) { objemployee.DeleteEmployee(id); } [HttpGet("GetCities")] public Task<List<Cities>> GetCities() { return objemployee.GetCityData(); } }} Creating the Blazor componentWe will create the component in the BlazorWithFirestore.Client/Pages folder. The application template provides the Counter and Fetch Data files by default in this folder. Before adding our own component file, we will delete these two default files to make our solution cleaner. Right-click on BlazorWithFirestore.Client/Pages folder and then select Add >> New Item. An “Add New Item” dialog box will open, select Core” from the left panel, then select “Razor Page” from templates panel and name it EmployeeData.cshtml. Click Add. Refer to the image below:This will add an EmployeeData.cshtml page to our BlazorSPA.Client/Pages folder. This razor page will have two files – EmployeeData.cshtml and EmployeeData.cshtml.cs.Adding references for JS InteropWe will be using a bootstrap modal dialog in our application. We will also include a few Font Awesome icons for styling in the application. To be able to use these two libraries, we need to add the CDN references to allow the JS interop.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> Here, we have included the CDN references, which will allow us to use the bootstrap modal dialog and Font Awesome icons in our applications. Now, we will add codes to our view files.EmployeeData.cshtml.csOpen EmployeeData.cshtml.cs and put the following code into it.using System;using System.Collections.Generic;using System.Linq;using System.Net.Http;using System.Threading.Tasks;using BlazorWithFirestore.Shared.Models;using Microsoft.AspNetCore.Blazor;using Microsoft.AspNetCore.Blazor.Components;namespace BlazorWithFirestore.Client.Pages{ public class EmployeeDataModel : BlazorComponent { [Inject] protected HttpClient Http { get; set; } protected List<Employee> empList = new List<Employee>(); protected List<Cities> cityList = new List<Cities>(); protected Employee emp = new Employee(); protected string modalTitle { get; set; } protected string searchString { get; set; } protected override async Task OnInitAsync() { await GetCityList(); await GetEmployeeList(); } protected async Task GetCityList() { cityList = await Http.GetJsonAsync<List<Cities>>("api/Employee/GetCities"); } protected async Task GetEmployeeList() { empList = await Http.GetJsonAsync<List<Employee>>("api/Employee"); } protected void AddEmployee() { emp = new Employee(); modalTitle = "Add Employee"; } protected async Task EditEmployee(string empID) { emp = await Http.GetJsonAsync<Employee>("/api/Employee/" + empID); modalTitle = "Edit Employee"; } protected async Task SaveEmployee() { if (emp.EmployeeId != null) { await Http.SendJsonAsync(HttpMethod.Put, "api/Employee/", emp); } else { await Http.SendJsonAsync(HttpMethod.Post, "/api/Employee/", emp); } await GetEmployeeList(); } protected async Task DeleteConfirm(string empID) { emp = await Http.GetJsonAsync<Employee>("/api/Employee/" + empID); } protected async Task DeleteEmployee(string empID) { Console.WriteLine(empID); await Http.DeleteAsync("api/Employee/" + empID); await GetEmployeeList(); } protected async Task SearchEmployee() { await GetEmployeeList(); if (searchString != "") { empList = empList.Where( x => x.EmployeeName.IndexOf(searchString, StringComparison.OrdinalIgnoreCase) != -1).ToList(); } } }} Here, we have defined the EmployeeDataModel class, which is inheriting from BlazorComponent. This allows the EmployeeDataModel class to act as a Blazor component.We are also injecting the HttpClient service to enable the web API calls to our EmployeeController API.We will use the two variables — empList and cityList — to hold the data of our Employee and Cities collections respectively. The modalTitle property, which is of type string, is used to hold the title that will be displayed in the modal dialog. The value provided in the search box is stored in the searchString property which is also of type string.The GetCityList method will make a call to our web API GetCities method to fetch the list of city data from the cities collection. The GetEmployeeList method will send a GET request to our web API to fetch the list of Employee Data from the Employee table.We are invoking these two methods inside the OnInitAsync method, to ensure that the Employee Data and the cities data will be available as the page loads.The AddEmployee method will initialize an empty instance of the Employee object and set the modalTitle property, which will display the title message on the Add modal popup.The EditEmployee method will accept the employee ID as the parameter. It will send a GET request to our web API to fetch the record of the employee corresponding to the employee ID supplied to it.We will use the SaveEmployee method to save the record of the employee for both the Add request and Edit request. To differentiate between the Add and the Edit requests, we will use the EmployeeId property of the Employee object. If an Edit request is made, then the EmployeeId property contains a string value, and we will send a PUT request to our web API, which will update the record of the employee. Otherwise, if we make an Add request, then the EmployeeId property is not initialized, and hence it will be null. In this case, we need to send a POST request to our web API, which will create a new employee record.The DeleteConfirm method will accept the employee ID as the parameter. It will fetch the Employee Data corresponding to the employee ID supplied to it.The DeleteEmployee method will send a delete request to our API and pass the employee ID as the parameter. It will then call the GetEmployeeList method to refresh the view with the updated list of Employee Data.The SearchEmployee method is used to implement the search by the employee name functionality. We will return all the records of the employee, which will match the search criteria either fully or partially. To make the search more effective, we will ignore the text case of the search string. This means the search result will be same whether the search text is in uppercase or in lowercase.EmployeeData.cshtmlOpen EmployeeData.cshtml page and put the following code into it.@page "/employeerecords"@inherits EmployeeDataModel<h1>Employee Data</h1><div class="container"> <div class="row"> <div class="col-xs-3"> <button class="btn btn-primary" data-toggle="modal" data-target="#AddEditEmpModal" onclick="@AddEmployee"> <i class="fa fa-user-plus"></i> Add Employee </button> </div> <div class="input-group col-md-4 offset-md-5"> <input type="text" class="form-control" placeholder="Search Employee" bind="@searchString" /> <div class="input-group-append"> <button class="btn btn-info" onclick="@SearchEmployee"> <i class="fa fa-search"></i> </button> </div> </div> </div></div><br />@if (empList == null){ <p><em>Loading...</em></p>}else{ <table class='table'> <thead> <tr> <th>Name</th> <th>Gender</th> <th>Designation</th> <th>City</th> </tr> </thead> <tbody> @foreach (var emp in empList) { <tr> <td>@emp.EmployeeName</td> <td>@emp.Gender</td> <td>@emp.Designation</td> <td>@emp.CityName</td> <td> <button class="btn btn-outline-dark" data-toggle="modal" data-target="#AddEditEmpModal" onclick="@(async () => await EditEmployee(@emp.EmployeeId))"> <i class="fa fa-pencil-square-o"></i> Edit </button> <button class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteEmpModal" onclick="@(async () => await DeleteConfirm(@emp.EmployeeId))"> <i class="fa fa-trash-o"></i> Delete </button> </td> </tr> } </tbody> </table>}<div class="modal fade" id="AddEditEmpModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">@modalTitle</h3> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">X</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label class="control-label">Name</label> <input class="form-control" bind="@emp.EmployeeName" /> </div> <div class="form-group"> <label class="control-label">Gender</label> <select class="form-control" bind="@emp.Gender"> <option value="">-- Select Gender --</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> <div class="form-group"> <label class="control-label">Designation</label> <input class="form-control" bind="@emp.Designation" /> </div> <div class="form-group"> <label class="control-label">City</label> <select class="form-control" bind="@emp.CityName"> <option value="-- Select City --">-- Select City --</option> @foreach (var city in cityList) { <option value="@city.CityName">@city.CityName</option> } </select> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-block btn-success" onclick="@(async () => await SaveEmployee())" data-dismiss="modal"> Save </button> </div> </div> </div></div><div class="modal fade" id="deleteEmpModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">Confirm Delete !!!</h3> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">X</span> </button> </div> <div class="modal-body"> <table class="table"> <tr> <td>Name</td> <td>@emp.EmployeeName</td> </tr> <tr> <td>Gender</td> <td>@emp.Gender</td> </tr> <tr> <td>Designation</td> <td>@emp.Designation</td> </tr> <tr> <td>City</td> <td>@emp.CityName</td> </tr> </table> </div> <div class="modal-footer"> <button class="btn btn-danger" data-dismiss="modal" onclick="@(async () => await DeleteEmployee(@emp.EmployeeId))"> Delete </button> <button data-dismiss="modal" class="btn">Cancel</button> </div> </div> </div></div> The route for our component is defined at the top as “/employeerecords”. To use the methods defined in the EmployeeDataModel class, we will inherit it using the @inherits directive.We have defined an Add Employee button. Upon clicking, this button will invoke the AddEmployee method and open a modal dialog, which allows the user to fill out the new Employee Data in a form.We have also defined our search box and a corresponding search button. The search box will bind the value to searchString property. On clicking the search button, SearchEmployee method will be invoked, which will return the filtered list of data as per the search text. If the empList property is not null, we will bind the Employee Data to a table to display it on the web page. Each employee record has the following two action buttons corresponding to it:Edit: This button will perform two tasks. It will invoke the EditEmployee method and open the edit employee modal dialog for editing the employee record.Delete: This button will also perform two tasks. It will invoke the DeleteConfirm method and open a delete confirm modal dialog, asking the user to confirm the deletion of the employee’s record .We have defined a form inside the bootstrap modal to accept user inputs for the employee records. The input fields of this form will bind to the properties of the employee class. The City field is a drop-down list, which will bind to the cities collection of the database with the help of the cityList variable. When we click on the save button, the SaveEmployee method will be invoked and the modal dialog will be closed.When user click on the Delete button corresponding to an employee record, another bootstrap modal dialog will be displayed. This modal will show the Employee Data in a table and ask the user to confirm the deletion. Clicking on the Delete button inside this modal dialog will invoke the DeleteEmployee method and close the modal. Clicking on the Cancel button will close the modal without performing any action on the data.Adding the navigation link to our componentBefore executing the application, we will add the navigation link to our component in the navigation menu.Open the BlazorWithFirestore.Client/Shared/NavMenu.cshtml page and add the following navigation link:<li class="nav-item px-3"> <NavLink class="nav-link" href="employeerecords"> <span class="oi oi-list-rich" aria-hidden="true"></span> Employee Data </NavLink></li> Hence, we have successfully created a Single Page Application (SPA) using Blazor with the help of cloud Firestore as database provider.Execution DemoPress F5 to launch the application.A web page will open as shown in the image below. The navigation menu on the left is showing navigation link for Employee data page.You can perform the CRUD operations on this application as shown in the GIF image at the start of this article.ConclusionWe have created a Single Page Application (SPA) using Blazor with the help of Google cloud Firestore as database provider. We have created a sample employee record management system and performed CRUD operations on it. Firestore is a NoSQL database, which allows us to store data in form of collections and documents. We have also used a bootstrap modal popup to handle user inputs. We have also implemented a search box to search the employee list by employee name.

Getting Data From An Online SourceAs I’m sure many statisticians do, I keep a folder of “stock code”, or template scripts that do different things. This folder is always growing and the scripts are always improving, but there are a few in there that I think are worth sharing. Some of these are templates for common analyses, while others are just reminders of how to use a couple of commands to accomplish a practical task.This post is of the latter type. I’m going to discuss fetching data from a URL.Why might one need to fetch data from a URL?You want to share your code with someone who isn’t familiar with R and you want to avoid the inevitable explanation of how to change the file path at the beginning of the file. (“Make sure you only use forward slashes!”)The data at the URL is constantly changing and you want your analysis to use the latest each time you run it.You want the code to just work when it’s run from another machine with another directory tree.You want to post a completely repeatable analysis on your blog and you don’t want it to begin with “go to http://www.blahblahblah.com, download this data, and load it into R”.Whatever your reason may be, it’s a neat trick, but it’s not one I use so often that I can just rattle off the code for it from memory. So here’s my template. I hope it can help someone else.Caveat!!!This is only for data that is in tabular form already. This is not for web scraping (i.e. extracting a table of data from a Wikipedia page.) There areentire packages devoted to that. This is for the simplest of all cases where there is a .csv file or a .txt file (or similar) at a URL and you want to read it into R directly from that URL without the intermediate step of saving it somewhere on your computer.Using data.table’s fread()I love the data.table package. I use it every day, for almost every project I do. It’s an extension of the data.frame object class in R that makes many improvements. One of those improvements is in the function fread(). It’s data.table’s answer to base R’s read.csv(). It does many things better, but here I’m only going to address its ability to read data right from the web. As a primer, its typical use on a data file residing on your computer would look something like this:library(data.table)mydat <- fread('C://Some/File/Path.csv') Reading data from a source on the web is no different. The example the package authors give in the help file (?fread) is this:library(data.table)mydat <- fread('http://www.stats.ox.ac.uk/pub/datasets/csb/ch11b.dat')head(mydat)  V1 V2 V3 V4 V51: 1 307 930 36.58 02: 2 307 940 36.73 03: 3 307 950 36.93 04: 4 307 1000 37.15 05: 5 307 1010 37.23 06: 6 307 1020 37.24 0 Now if you actually navigate to that link in your browser, you won’t see anything, but a download dialog should pop up. If you navigate to the parent directory of that address, http://www.stats.ox.ac.uk/pub/datasets/csb you will see some text further down the page you will see several links to data files. Each of these links launches a download dialog when clicked. To grab the URL of the data file to pass to fread(), right click the link and select “Copy link address”. Other data files online might appear in the browser instead of launching download dialog, like this one a professor of mine had us use for an assignment. fread() handles these URLs just the same.fread() makes smart decisions about how to read the data in (it detects column names and classes and so on), but the command has several arguments for specifying such things as well that you can use at your own discrimination. I find fread('filename') almost always just works, but sometimes there are reasons to be more explicit when reading data in.Using RStudioIf you’re not familiar with RStudio, you are a true R novice. If you know what it is, but don’t use it, skip ahead.In RStudio, you can click “Tools” -> “Import Dataset” -> “From Web URL” and a dialog will pop up asking you for a URL. Paste a URL into the dialog box (let’s just use the same one as before: http://www.stats.ox.ac.uk/pub/datasets/csb/ch11b.dat) and click “OK”. A nice little window pops up and allows you to specify how the data should be read and what name the object should be given in R. When you click “Import”, the data is read in and some code appears in the console. What this interface does is download the data to a temporary file in a temporary folder and then read it in. The downloaded data file persists on your hard drive as long as your R session lasts, but disappears as soon as your R session ends.This is handy, but if you wanted to repeat the process, you would have to click through the menu again and supply the data URL again. This isn’t exactly “repeatable” in the Stack Overflow sense of the word.Using RCurl’s getURL()The RCurl package provides bindings to the cURL library. This is a C library for web connections. The cURL library does way more than we need for this task and frankly, I don’t understand a lot of it. I saved RCurl for last because iI usually try fread() first, and then if I get some sort of error, I resort to RCurl. Take for example the data set at this link: https://sakai.unc.edu/access/content/group/3d1eb92e-7848-4f55-90c3-7c72a54e7e43/public/data/bycatch.csv (also posted by a professor for an assignment of mine). If you try to fread() it, no dice. I have no idea what that error message means, but here’s how to get that data set in anyway.library(RCurl)myfile <- getURL('https://sakai.unc.edu/access/content/group/3d1eb92e-7848-4f55-90c3-7c72a54e7e43/public/data/bycatch.csv', ssl.verifyhost=FALSE, ssl.verifypeer=FALSE) What are the arguments ssl.verifyhost=F and ssl.verifypeer=F doing? To be quite honest, I don’t really know. But if I’m having trouble reading from a URL I try specifying these arguments and changing one or both to FALSE almost always circumvents whatever error I’m getting.This grabs the content residing at the specified URL, but doesn’t return a data.frame object. It has simply put the URL’s content into a string.class(myfile) [1] "character" So how to get this into a data.frame object? We’ll use textConnection() to open a “connection” with the string, much like you would open a connection with a file on your hard drive in order to read it. Then we’ll have read.csv() (or you could use read.table() or fread() or similar) to read the string object like a text file and create a data.frame object.mydat <- read.csv(textConnection(myfile), header=T)head(mydat)  Season Area Gear.Type Time Tows Bycatch1 1989-90 North Bottom Day 48 02 1989-90 North Bottom Night 6 03 1989-90 North Mid-Water Night 1 04 1989-90 South Bottom Day 139 05 1989-90 South Mid-Water Day 6 06 1989-90 South Bottom Night 6 0 And there you have it. The data from the URL is now in a data.frame and ready to go.Aside: read.csv() is just a vesion of read.table() with argument defaults such as sep = "," that make sense for reading .csv files.A Use CaseLet’s pretend I want to automate something having to do with weather in Chicago. Maybe it’s a knitr document that I have scheduled to re-knit every night on my server. Every time the script re-runs, it should somehow take into account recent weather in Chicago. Weather Undergroundoffers historic (and an hour ago counts as “historic”) hourly weather data for many different locations. Many of these locations are airports, which for obvious reasons, have several meteorological sensors on site. On the Weather Underground page you can select a location and a date and see hourly weather for that calendar day. At the bottom of the page, you can click “Comma Delimited File” to see the data in comma delimited format – perfect for reading into R.The URLs for such data are always of a predictable form:http://www.wunderground.com/history/airport/4LetterAirportCode/year/month/day/DailyHistory.html?some_junk_specifying_formatI see that the four letter airport code for Chicago is “KMDW” and after clicking through a few of these URLs, I see the stuff after “DailyHistory.html” doesn’t change. So if I know the date, I can construct the URL where the hourly Chicago airport wether for that date can be found in .csv format.First, I define the beginning and end of the URL, which never change.baseURL <- 'http://www.wunderground.com/history/airport/KMDW'suffixURL <- 'DailyHistory.html?HideSpecis=1&format=1' There is opportunity here to generalize this for many locations if one simply maps the four letter codes to other locations of interest usingswitch() or similar.Then I ask the system for todays date and from it produce a string having format year/month/day.Date <- Sys.Date()datestring <- format(Date, '%Y/%m/%d') Then I piece all of these strings together to get a URL which will lead to a .csv file of today’s weather in Chicago.url2fetch <- paste(baseURL, datestring, suffixURL, sep='/') Finally I grab the content of the webpage at that URL using the RCurl method described above. I choose getURL() instead of fread() for good reason; I’ll need to do some find-and-replace to clean up some html artifacts in the data and that is more efficient to do on one big string rather than on a bunch of individual values in a data.frame.url_content <- getURL(url2fetch) Now I have the content of the page in a string and I want to read that string into a data.frame object, but every line of the data ends with an html newline (“<br />”) and a text newline (“n”). read.csv() will recognize the “n” as a signal to start a new row of the data.frame, but the “<br />” isn’t recognized and will be appended to the value in the last column of every row. So let’s take care of this before read.csv() ever gets involved. I’ll do a simple find-and-replace where I find “<br />” and replace it with an empty string (""), aka nothing. This is the regex way of find-and-delete.url_content <- gsub('<br />', '', url_content) Finally I can “read” the data into a data.frame object with the help of read.csv() and textConnection().weather_data <- read.csv(textConnection(url_content))head(weather_data)  TimeCST TemperatureF Dew.PointF Humidity Sea.Level.PressureIn1 12:22 AM 21.9 17.1 82 30.022 12:53 AM 21.9 16.0 78 30.073 1:53 AM 21.9 15.1 75 30.094 2:24 AM 21.0 14.0 74 30.045 2:39 AM 21.0 14.0 74 30.046 2:53 AM 21.0 15.1 78 30.09 VisibilityMPH Wind.Direction Wind.SpeedMPH Gust.SpeedMPH PrecipitationIn1 1.0 NNE 13.8 - 0.012 1.0 NNE 15.0 - 0.013 4.0 NNE 11.5 - 0.004 2.5 NNE 16.1 - 0.005 1.5 NNE 12.7 - 0.006 1.8 NNE 12.7 - 0.00 Events Conditions WindDirDegrees DateUTC1 Snow Snow 30 2015-02-26 06:22:002 Snow Light Snow 30 2015-02-26 06:53:003 Snow Light Snow 30 2015-02-26 07:53:004 Snow Light Snow 30 2015-02-26 08:24:005 Snow Light Snow 30 2015-02-26 08:39:006 Snow Light Snow 30 2015-02-26 08:53:00