As a company that has a specializes in migrations, we understand the frustrations when it comes to the migration from AngularJS to Angular, especially when issues arise due to differences between Promises in AngularS and Observables in Angular2+.
In this article, we would like to highlight the key differences between Promises and Observables and clear confusions that you may have.
Promises are commonly used in AngularJS to handle HTTP requests. After making a request, a single response is expected with which the promise is resolved as in the example below:
However, resolving a Promise again with a different value will not work. It is always resolved with the initial value passed to the resolve function and disregards next calls to it:
In contrast to Promises, Observables emit a stream of one or multiple values that are all passed to their subscribers as illustrated in the example below. Typically, the Angular HTTP service provides an Observable stream with one response value, making its behaviour alike to a Promise.
In basic migration scenarios, the AngularJS $http service can be replaced by the Angular httpService. However, if you are dealing with more complex applications there a many key differences to pay attention to. Hereafter, we will discuss the most common differences:
Eager vs. Lazy
In the example above, when you call the saveChanges method, the initial Promise-wrapped request will function. While Promises are eager-evaluated, Observable-wrapped requests will not do anything as Observables are lazy-evaluated.
Observables will be called only if you subscribe to them. In the previous case, the post Observable needs to be subscribed as follows for the http called to be executed:
Let us have an example where on input text change from the user a search is requested on the backend. One major disadvantage is that you cannot reject the results of the initial request if you keep typing. Although you can ease this problem with a debounce, it does not entirely resolve the problem. Further on, there is a possibility of race conditions, which means that an incorrect response will be displayed due to the later request result coming back before earlier requests.
An Observable eliminates this issue elegantly with the use of the switchMap operator:
In this example, the input text typing is converted to an observable value stream. Each time a new text value is being emitted, the switchMap operator will cancel the last network requests and send a new one, if the last one is not finished.
Implementing a retry logic with Promises is a complex exercise that typically ends in a variation of the following code:
However, with Observables the same retry logic is implemented with the following one-liner!
Promises only have two combination tools:
In contrast, Observables have a variety of combinations:
To conclude, when you migrate from AngularJS that uses Promises for HTTP calls to Angular2+ that uses Observables, you need to be careful about the differences between the two frameworks. In particular, Observables offer powerful combination tools that should be leveraged to simplify the codebase.
We hope that this article was helpful to you and clarified differences that will ease your future developments or migration!
Hope you enjoyed today's #MondayBlog about Observable best practices. For more content, follow us on LinkedIn and subscribe to the newsletter on our website, and we will make sure that you’ll not miss out on anything! Have a great and productive week and see you at the next #MondayBlog by LogicFlow!
Zurich, January 8th, 2021 – LogicFlow AG, a start-up founded in 2020 announced today the closing of its CHF 0.5 million pre-seed round from Swiss Angel investors and Venture Kick for its one-of-a-kind code migration technology. LogicFlow is a Zurich-based startup driving automation in the software development industry. With the funding, LogicFlow will further develop and scale its leading software code translation and generation technology.
LogicFlow developed a first of its kind automation system for software migration,
enabling corporations to modernize faster and at a significantly lower cost.
Modernization is a major challenge for IT departments, as organizations evolve,
they suffer from decreasing productivity due to the technical debt in their
legacy systems. With the LogicFlow technology, repetitive code migration tasks
are automated, helping companies to migrate, modernize, standardize, and test
their IT systems at a fraction of the conventional time, cost, and risk.
In June of 2020, LogicFlow AG has already won 150’000 CHF from Venture Kick
Stage 3 for their unique software migration technology. LogicFlow is already
catering its software migration and testing capabilities to one of the major
Swiss banks, migrating over 100’000 lines of code at a record pace. The support
of Venture Kick has been decisive in shaping and bringing our offering to the
|Scientific advisor Prof. Fleisch shared his excitement over LogicFlow and their upcoming success: “I am proud to support LogicFlow since the very beginning. The team around Lucas Fiévet creates the code migration of tomorrow – a toolbox that every company in the digital space needs.”|
LogicFlow is dedicated to driving forward automation in software development. “We are grateful to our investors for their great support and confidence in LogicFlow,”
With the pre-seed funding, LogicFlow will further develop its migration system
and expand its presence in the migration market. Further on, LogicFlow is
extending its technology to launch a plugin that will enable software developers
with smarter autocompletion to reduce development time and bugs.
Lucas Fievet – CEO & Founder
Email: [email protected]
Tel: +41 76 513 09 96
LogicFlow was launched in 2020 with the mission to drive automation in software development that enables its customers to modernize their IT faster and focus more on innovation. The technology behind LogicFlow has been developed since 2016 and is now delivering production-ready migration results for large corporations. LogicFlow is a leading expert, both on the technology to automate software development, as well as on the execution of large-scale software migration and development projects.
About Venture Kick
The philanthropic initiative Venture Kick provides up to CHF 150,000 in seed funding to Swiss startups. In addition, it offers a well-structured entrepreneurial path towards building a winning business. Startups pitch to expert juries at three stages to obtain funding, gaining direct feedback and access to an international network of successful entrepreneurs and investors.
Since its launch in 2007, Venture Kick has supported 675 Swiss startup projects with 29.25 million francs. The program of financial support, training and network, has led to the creation of 519 companies and 6,967 jobs. Venture Kick alumni companies have attracted a total of 3.5 billion francs, and represent 54 companies ranked in the TOP 100 Swiss Startups 2019.
In 2020, Venture Kick will pay out 5 million francs to idea-stage startup projects to bring Swiss science to global markets. More information in the Venture Kick annual report.
The Venture Kick Foundation is supported by Gebert Rüf Stiftung, Ernst Göhner Stiftung, Hauser-Stiftung, André Hoffmann, Hansjörg Wyss, Martin Haefner, Igor Fisch, Fondation Pro Techno, ESA BIC Switzerland, Engagement Migros and Swisscom.
It’s no secret that migrating from AngularJS to the newer versions was a buzz for quite some time now in the tech world. Although the notion of “the newer the better” is relevant to Angular, still there are ongoing concerns if it’s actually worth it. There is always the question of how long it will take and how much will it cost. And we completely understand if you are undecided on the issue of migration.
But worry no more! We will guide you through things you need to know before making the final decision. First, you’ll discover in which ways newer versions of Angular are better than AngularJS. After that, we will give our recommendations on upgrading and introduce our amazing technology that will automate your migration that will make it fast and completely hassle-free!
Here are a few tips for you to make sure that the migration will be as painless as possible:
November 30, Zürich
If you haven’t visited Angular Materials documentation website yet, we will take you through the new visual updates! First, the Angular team has updated the homepage, added new colourful images on the component's page, and remade the guides page, and so much more!
Annie Wang, who is one of the people behind the Angular Components project, writes that the illustrations on the Material Design components inspired them with the aesthetic abstract design that referenced each component. The initial plan was to adapt the idea for material.angular.io, however, a few obstacles and requirements stood in the way. A major issue is the absence of the dedicated illustrator on the team. As for the requirements, the Angular Team wanted to make sure that images would be compact and clearly reference each individual component, as well as easily update images when the component’s appearance changed. Thus, the Angular Team decided to take upon themselves to build what they have envisioned from scratch.
The design of the components on the Angular Components is more of a realistic view rather than an abstract representation. They created “scenes” for every component to capture them the way they would be used. A technique named “screenshot testing” now helps to efficiently capture these components. It allows to capture an image of the page of the given URL and to compare it to the expected image. With the given technique, they can automatically generate up-to-date scenes for all the 35 components.
1) They have set up a route for each component which contains a “scene” using the actual material component
2) Created an end-to-end testing environment and took screenshots of each route with a protractor
3) Saved the screenshots instead of comparing them to an expected image
4) Loaded the screenshots from the site
This approach saves a lot of time and effort as whenever a component is going to be upgraded, all you need is to take new screenshots!
In fact, we use the screenshot automation for scenes at LogicFlow in our testing tool as well!
The team held a small hackathon to create each scene where they could share with their cool ideas. For instance, on the left - the button component, it displays all different styles and types of available buttons like FAB, icon, raised, etc. And on the right - we have the toggle component, where you can see the toggle in both states.
To conclude, we here at LogicFlow are excited for the new look of Angular Components as well as all the new updates, and we are sure you will love it as well! Take a look at the new website and let us know what you have enjoyed the most.
To read the original article from Angular Blog written by Annie Wang, click here
Hope you enjoyed our #MondayBlog on the latest news from the techno world. Be sure to follow us on LinkedIn and subscribe to our newsletter on our website, and we will make sure that you’ll not miss out on anything! Have a great and productive week and see you at the next #MondayBlog by LogicFlow!
The Angular Team has announced their release of Angular 11 with great new updates that include the framework and the CLI. Let’s get into it!
Another great feature of Angular 11.0.0 is automatic font lining. Angular CLI will download and inline fonts during compile that are used and linked in the application by default. To use this optimization, all you need to do is update your Angular app!
It’s an improved version of the original one that was introduced in Angular 9. In version 11, there is now a harness for all of the components, which gives developers the ability to create more robust suites.
They have also included new APIs and performance improvements. Now developers can run multiple asynchronous interactions with components in parallel that makes working with asynchronous actions in tests easier with the new parallel function. And with the manualChangeDetection function, which disables automatic change detection in unit tests, developers can have access to fine-grained control of change detection.
The new version of Language Service Preview is an Ivy-based language service that gives a more powerful and accurate experience for developers. Similarly to the TypeScript compiler, the new language service can correctly infer generic types in templates. For instance, as you can see in the image below the new version can infer that the iterable is of type string. Although this update is still in development, we can’t help but be excited for its release in the upcoming dates.
Angular Language Service inferring iterable types in templates
Angular now has updated CLI that allows enabling HMR when starting an application with ng serve. You can run the following command:
A message will be displayed confirming that HMR is active after the local server starts the console
Attention! The HMR is enabled for the dev server.
To learn more, click on this link https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for webpack.
Without refreshing a page, all the latest changes to the components during the development, styles and templates will instantly update into the running application. To not slow developer’s productivity, this new feature will preserve data typed into forms and the scroll position.
The new version also presents Experimental webpack 5 Support where teams now can opt-in to webpack v5. Now that you can experiment with module federation, soon enough with webpack v5 you can do:
- Faster builds with persistent disk caching
- Smaller bundles thanks to cjs tree-shaking
It is in the experimental phase and the Angular team suggests not to opt-in for production uses.
To try the new webpack 5 add the following section to your package.json file:
NOTICE: For now you’ll have to use yarn to test this as npm does not yet support the resolutions property.
The new Angular 11 version introduces a ton of new cool features like Improved Reporting and Logging, Faster Builds, Linting, Housekeeping, Roadmap. To learn more about these features, make sure to read the full article from Angular Teams on Angular 11 by clicking on this link: https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7
If you would like to update to the newest version, run this command to update Angular and the CLI:
Go to update.angular.io to get detailed information and guidance on updating. The Angular team always recommends upgrading one major release at a time to have the best update experience.
Hope you enjoyed our #MondayBlog on the latest news from the techno world. Be sure to follow us on LinkedIn and subscribe to our newsletter on our website, and we will make sure that you’ll not miss out on anything!
Checkout our job postings on the career page. Or contact us at [email protected].