The issues of migration: Observables vs. Promises
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
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:
Observables
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:
Cancelling and unsubscribing
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.
Repeat or Retry becomes so much simpler with Observables!
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!
Observables have many combination tools that Promises miss
Promises only have two combination tools:
- Promise.all
- Promise.race
In contrast, Observables have a variety of combinations:
- combineLatest(observable1, observable2,…)
- observable1.pipe(withLatestFrom(observable2)
- forkJoin(observable1, observable2,…)
- zip (observable1, observable2,…)
- race(observable1, observable2,…)
- merge(observable1, observable2,…)
- switchAll
- concat
And so much more: window, switchMap, partition, groupBy, mergeMap, iif, etc.
Last words…
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!
|
FOLLOW
FOLLOW CONTACT US |
LogicFlow Completes CHF 0.5 million Round
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
market.
| 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.
For further information visit our
website
or follow us on
LinkedIn
.
Contact Information
LogicFlow AG
Lucas Fievet – CEO & Founder
Email:
[email protected]
Tel: +41 76 513 09 96
About LogicFlow
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.
|
|
FOLLOW
FOLLOW CONTACT US |
Why you should migrate from AngularJS now
AngularJS Migration is on the #HotTopics!
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!
AngularJS vs. Angular
AngularJS
As you know, AngularJS is a JavaScript framework to implement the front end of web applications and it covers all versions of the framework that appeared before Angular 2. Although it was made by Google in 2009, the actual release took place in 2012.In accordance with “Built With”, AngularJS powers more than 3 million websites, which makes it the most popular open-source web development technologies worldwide. It doesn’t come as a surprise because with AngularJS, you can fast create dynamic interfaces. This is all due to the use of declarative programming behind this framework to build the front-end of web applications. It also uses HTML as a template language, which allows creating a very expressive and readable environment that is quick to develop.
Angular
Just as AngularJS, Angular was made by Google and released in 2016, which was the direct descendant of the first-ever created AngularJS. Angular2+ or simply Angular are referred to as Angular2 and the later versions, and all of them are Typescript-based platforms.If you are not quite sure if there is a significant difference between the two and later versions, however, you might be surprised. The code for Angular was actually written from scratch, therefore, it has not much in common with the initial framework. Developers really wanted to make significant improvements in enhancing the performance of web applications.
AngularJS vs. Angular comparison
Source GBKSOFT.com
Advantages of Angular over AngularJS
The table above comparing AngularJS and Angular might be a bit confusing, so let us take you through the crucial points and tell you how the migration will enhance your application!Boost in performance
The main reason is that this framework was created mainly for web designers, thus, it is not that good at meeting programmers’ requirements. Reportedly, Angular offers a five-time higher speed than AngularJS and that is quite an amazing improvement.Besides the faster page load time, the change detection was heavily optimized in Angular. Therefore, especially for larger applications, a migration from AngularJS to Angular can really boost the performance of your app, i.e. when presenting large lists.
Mobile-driven approach
Angular allows developers to build lightweight applications that may be downloaded faster. One of the main reasons is that Angular uses so-called lazy scripting. This means that it loads particular modules only when they are needed. On top of that, some packages (for example, animations) were removed from the main Angular core. This enabled lighter and faster performance. Code optimization
Unlike AngularJS that uses JavaScript, Angular 2x is based on TypeScript. The latter is a superset of ECMAScript 6 (ES6) and has an advanced type-checking feature. This means that most mistakes can be noticed before transpiling. Hence, developers can build large applications and avoid compile-time errors. With Typescript, code may be structured in classes, therefore blocks of functionality can now expose a clear API to the developer with superb support from your IDE.Maintainability
Among many other differences, we have better maintainability. Angular allows programmers to update applications by swapping specific components in and out as components co-exist within one space but are independent of each other (they have their own methods, structures, and APIs), which can be a money-saving advantage for companies. Moreover, the components are reusable across applications by exposing a clear API.In AngularJS, depending on the developer's implementation, the context of a directive could never be 100% clear, as other parts of the application are able to manipulate and change it, which can become a hot mess. In a big application, learning those dependencies can be very time consuming, that’s why the component-based approach of Angular is a huge improvement.
Reduced development time, costs and better support
With the later versions of Angular, developers can build an application faster and easier thanks to tools such as the official CLI, IDEs with plugins for Angular, installable components and many more that AngularJS doesn’t have.It is a no-brainer that reduced development time equals fewer associated costs, as programmers are mainly paid on per hour basis. Besides, the maintenance of the application of Angular also becomes cheaper as there are more software engineers that specialize in this technology, which makes their rate lower.
As for better support, the Angular creators release an enhanced version of angular twice a year. Therefore, you can keep up with the latest advancements, so your applications won’t get outdated.
The migration done right
Here are a few tips for you to make sure that the migration will be as painless as possible:
Make a transition to TypeScript beforehand
First, you need to bring in the TypeScript compiler before you start the migration process. Make sure to carefully review the existing code, make annotations, etc. Although it will take some time, however, the results will be worth it.Migrate smoothly
A lot of people are hesitant to upgrade applications to the newer versions of Angular because, as they think, it will pause the use and feature development of such applications for a significant period of time. But that’s not true. You can migrate gradually, since both frameworks may co-exist within one app.Follow Angular guide
The Angular team published guidelines with best practices on upgrading to the later versions of the framework. Following them will make this task easier for you. In addition, Angular has a wide and active community so you should be able to find support from people who have experience in a successful migration.To read the original article from GBKSOFT, please click here
Still afraid of the hassle - Then why not automate it?
We here at LogicFlow developed an amazing technology that automates large parts of the migration process. With that technology, we can translate services, filters and directives from AngularJS to Angular. Depending on your architectural needs, the translation process can be configured to integrate different patterns. You could, for example, want to make use of RxJs instead of promises.By working with migration experts and manually fine-tuning your code to your needs, we make sure to not only migrate your codebase but to make it future proof and integrate it into your existing application landscape. We are dedicated to adhering to Best Practices and Coding standards, thereby ensuring that your developers can work on the new codebase in no time.
For applications with ongoing feature development, we promote a hybrid approach, where we migrate parts of your application while work is done on other parts. At some point, your developers can switch to Angular and the rest of the migration takes place. Thereby, instead of migrating code, your developers are free to keep improving your application.
Conclusion
I hope we have equipped you with enough knowledge on the difference between the AngularJS and later versions, the importance of migration, and the way around it to make it less stressful for you and your company. The final decision is always up to you, but we recommend to migrate as it is an investment worth making. We are proud of our amazing technology that will help your business to migrate effortlessly and would love to help you with this hard yet exciting journey!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 long-awaited new look of Angular Materials is finally here!
November 30, Zürich
Have you seen the new look of Angular Materials on material.angular.io? The newly added visual updates are worth the buzz!
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!
So what’s the inspiration behind these fun and vibrant images?
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.
So how did they do it?
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!
New Angular 11 is out now and we are here for it!
- Hide interface (H)
- Restart (R)
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!
What are the new features of Angular 11?
Updates on Operation Byelog
Automatic Inlining of Fonts
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!
Component Test Harnesses
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.
Updated Language Service Preview
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
Updated Hot Module Replacement (HMR) Support
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.
Experimental webpack 5 Support
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.
Other new cool features
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
Update to version 11 now!
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!
