npm install -g @google/clasp
npm i -S @types/google-apps-script

clasp login

clasp create

function getTextStyle(): any {
const style = {};
style[DocumentApp.Attribute.BOLD] = false;
style[DocumentApp.Attribute.FONT_FAMILY] = 'Calibri';

return style;
}

function addLogo(parentParagraph: GoogleAppsScript.Document.Paragraph, size: number): void {
const logoBlob = DriveApp.getFilesByName('Inero_Software_logo.png').next().getBlob();
parentParagraph.addPositionedImage(logoBlob)
.setLeftOffset(400)
.setHeight(size)
.setWidth(size);
}

function addHeader(): void {

let header = DocumentApp.getActiveDocument().getHeader();
if (!header) {
header = DocumentApp.getActiveDocument().addHeader();
}
…
}

function addHeader(): void {

...

const style = getTextStyle();
style[DocumentApp.Attribute.FONT_SIZE] = 11;

let firstParagraph = header.appendParagraph('Inero Software sp. z o. o').setAttributes(style);
header.appendParagraph('Ul. Trzy Lipy 3, 80-172 Gdańsk, PL').setAttributes(style);
header.appendParagraph('inero-software.com').setAttributes(style);

addLogo(firstParagraph, 60);

header.appendHorizontalRule();
}

function addFooter(): void {

let footer = DocumentApp.getActiveDocument().getFooter();
if (!footer) {
footer = DocumentApp.getActiveDocument().addFooter();
}

const style = getTextStyle();
style[DocumentApp.Attribute.FONT_SIZE] = 10;

let firstParagraph = footer.appendParagraph('inero-software.com').setAttributes(style);
footer.appendParagraph('hi@sandbox-www.devel.inero.com.pl').setAttributes(style);
footer.appendParagraph('VAT ID: PL583327270').setAttributes(style);

addLogo(firstParagraph, 40);
}

function onOpen(e): void {
DocumentApp.getUi().createAddonMenu()
.addItem('Add corporate Header & Footer', 'addFooterAndHeader')
.addToUi();
}

function addFooterAndHeader(): void {
addHeader();
addFooter();
}

clasp push

Artykuł Create Google Docs custom Add-on using Apps Script with TypeScript pochodzi z serwisu Inero Software - Software Consulting.

WARNING: I assume that you know basics of asynchronous programming, if not then please read this before going any further: Asynchronous Concepts

So, what’s RxJs?

According to the documentation:

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc) to allow handling asynchronous events as collections.

In simple words, RxJs is a library which helps you in working with asynchronous tasks, events and streams and it does that by sharing some useful classes like aforementioned Observable and a ton of cool operators (due to my desire of keeping this post relatively short I am going to present only 5 operators that I find the most useful in my everyday work). Actually, RxJs has been so helpful to the Angular community that the Angular team decided to include it into Angular itself with the 6th version.

We are going to focus on Observables this time. Observable is a class that allows you to listen for events. To retrieve data from an observable you need to subscribe to it, when you do that it listens for events happening, so when they happen, you get the data. You can get more details on observables here: https://rxjs.dev/guide/observable.

Now let’s discuss 3 most common situations where developers are using Observables

Http Requests

All HtttpClient methods are returning Observables and that is of course because it takes time for a server to process and return the data (or just return in case you’re sending a get request). That means that http request operation is asynchronous.

DOM events

Observables enable you to easily listen for DOM events like click or keyup. To listen to them you should use the fromEvent function that creates an observable accordingly. Here’s how this looks like:

fromEvent(document, ‘keyup’);

(Remember that if you want to receive the actual data you should subscribe to it by adding .subscribe() before semicolon)

Stores

Another very common use case for using Observables is using them with some kind of store, like NgRx or NgXs. Stores like that usually share observables in order to keep watch over the state of the application.

Now since you know the very basics like why and how, let’s get to the useful interesting stuff that can be one with RxJs operators.

RxJs operators

In our examples we are going to use simplest observable possible:

const obs$ = from([1, 2, 3]); (dollar sign at the end of the variable is a naming convention used to singlaize that the variable is indeed an observable)

How to use operators?

Easiest way to use operators is by putting them inside a pipe. Pipe runs a function for every stream element passing by the operator, and operators are the functions that can be used within it.

first

First operator is the first operator that we’re going to talk about (got the pun?). Most operators have self-describing titles and this case is no different. First operator basically allows you to listen for the first returned value of the observable and then stop (note that it is completely useless combined with Http requests that return the value once anyways)

obs$.pipe(first()).subscribe(numbr => console.log(number));

Code above prints only 1 because it’s the first event emitted, 2 and 3 are ignored.

tap

Another useful operator worth mentioning is tap. Tap allows you to perform some kind of side effect for every event emission. For example you can log something or assign data to a variable (note: if you are using .subscribe it is basically the same thing).

obs$.pipe(tap(numbr => console.log(number))).subscribe();

Code above prints 1, 2 and 3 because tap is triggered for every emitted value.

map

Map is working the same way as in arrays. So it basically allows you to change structure of returned data. For example, let’s try to multiply every value returned by 2

obs$.pipe(map(numbr => numbr * 2)).subscribe(value => console.log(value));

The code prints 2, 4 and 6 just as expected.

startWith

StartWIth allows you to decide what first value is going to be. It is useful when you want to trigger the observable before the first event emission.

obs$.pipe(startWith(999)).subscribe(value => console.log(value));

Printed values are: 999, 1, 2, 3.

switchMap

SwitchMap is used mainly in typeahead cases but not limited to them. What it does – it cancels previous request when a new event arrives. In real life case you would for example listen for changes on the input and filter a table while typing (previous result is not relevant).
To present switchMap fully – this time we are going to use a different example. Observable is going to be created out of DOM event keyup.

const another$ = timer(1000);
fromEvent(document, 'keyup').pipe(
switchMap(() => another$)
).subscribe(() => console.log('log'));

What happens here is: After you click a button on keyboard, wait 1000 ms and then log a message. Now what happens ,if you click button 10 times quicker? Only one message is going to be logged, and that is because switchMap cancels previous timers leaving only the most recent one.

We went over 5 most useful operators in my opinion, described what RxJs is and discussed common use cases. I hope that this article will help you in your next project and interest you in exploring RxJs more 🙂

Inero Software provides knowledge and expertise on how to successfully use cutting edge technologies and data to shape corporate digital products of the future.

In the blog post section, you can find other articles about our projects and more! 

Artykuł RxJs for beginners (5 most useful operators) pochodzi z serwisu Inero Software - Software Consulting.

Why Angular?

At Inero Software we are using Angular at the front-end side of most of our projects and that is not without a reason.

• It is suitable for big software systems because of its component-based architecture which provides a higher quality of code, better maintainability, and code reusability.
• Native Typescript support, Typescript means Types and that means safer code.
• Angular, unlike other frameworks, is fully stacked with predefined solutions to problems you may approach, you don’t have to think about which library to use for every single implementation case whether it be routing, reactive programming, or making Http requests.

What’s a back-end long-running asynchronous task?

The easiest way to understand what’s a back-end long-running asynchronous task is to explain it with an example of our product which possesses this kind of task.

At Inero Software we are developing a product called DeliverM8 which is a delivery optimization platform. It has many functionalities but let’s focus on the important one for today’s article. Imagine that you run a company that is delivering products all around the country. You need a system that would display to you how many products and which products to put onto a truck and also how should they be ordered so that everything fits nicely.

Input requires the following data:

• How many products should be delivered?
• What are their sizes?
• Where do they go? (so we know which products should be on the beginning or end of the truck etc.)

The output is a 3d visualization which looks like this:

As you may imagine – it does take time for a backend service to create output like this, the AI that stands behind DeliverM8 logic runs millions of operations per second in order to find the best optimal available element arrangement. This is the back-end long-running asynchronous task. Depending on the input this may take up to 10 minutes and of course freezing of the frontend application until the data is retrieved is the last thing that we need, so what should we do?

Approaches

A DISCLAIMER: All examples are made with Angular, but the concepts mentioned below can easily be applied to any other frameworks/languages.

Synchronous

Probably the worst option out there but should be mentioned nevertheless. If in fact, the user shouldn’t be using the application, while he is waiting for the response, then you can just put some kind of modal loading screen while the user awaits the data and the problem is solved.

How:

You send a single POST request that tells the backend to start the calculations and return the data within the response of the beforementioned request.

Example:

public loadTrucks(loadTruckData): Observable<Route[]> {
return this.http.post<Route[]>('/api/load-trucks', loadTruckData);
}

Polling

Now polling is a slightly better option if the user wants to use the application while the data is loading and you don’t have that much time to invest in the solution and/or your backend is not providing you with WebSockets then polling is the way to go.

Polling means checking the status of (a backend endpoint in this case ), especially as part of a repeated cycle. Translating it to front-end language means making a get request every few seconds to see if the asynchronous task is finished. For backend that would mean creating a new GET endpoint that would return the calculated data. (if in fact it has been calculated before)

Not the most elegant solution out there but still pretty usable!

How:

We make one POST request that informs the backend to start the calculations and one more GET request to get the output data.

One of the ways of polling is combining RxJs’s timer with switchMap. Also remember to unsubscribe, because all sorts of intervals can easily produce memory leaks, in this example, we are using takeUntil operator that unsubscribes from the observable when it’s component is destroyed.

Example:

timer(0, 5000).pipe( switchMap(() => this.truckService.getLoadedTrucks()), takeUntil(this.stopPolling) )

Websockets

Websocket is a communication protocol (just like HTTP) “for a persistent, bi-directional, full duplex TCP connection from a user’s web browser to a server”. Basically what it means is that with WebSockets you can send out the data from the server and receive it in your frontend application without making any unnecessary requests (like you would using polling).

With the Websocket approach, you would send an HTTP POST request to start calculating the truckload. And at the same time, you would establish a WebSocket connection between the Frontend application and the server so that when the backend tasks finish the output is sent through that WebSocket connection.

How:

Send HTTP POST request that informs the backend to start the calculations and listen on Websocket connection with a backend that returns data when the calculations finish

Example:

At first, you connect to a WebSocket:

public connect() {
const socket = new WebSocket(this.webSocketUri);
this.stompClient = Stomp.over(socket);
this.stompClient.connect({},
() => this.subscribe()
}

And later on, you subscribe to its values:

this.stompClient.subscribe('/user/queue/truck-load-updates-queue', (msg: Stomp.Frame) => {
const msgBody = JSON.parse(msg.body);
...
});

The subscription above is triggered after the calculation is done.

Conclusion

That’s it!

I’ve described to you the problem of back-end long-running asynchronous tasks and various ways of handling them in the frontend application.

Websockets are the best way to go if you are struggling with this problem, but if the user doesn’t mind getting his application blocked (or maybe it is intended to block the app for the time being) for the time when the backend is performing its tasks then you can simply go with KISS principle and just make one synchronous request.

Polling is also an option if the developers don’t feel like implementing WebSockets and additional network movement is of no concern.

Thanks for reading! And I hope you liked the article 🙂

Artykuł Angular: How to manage back-end long-running asynchronous tasks pochodzi z serwisu Inero Software - Software Consulting.

The frontend world is currently ruled by 3 colossuses known as Angular, React.js, and Vue.js, but are there any other alternatives?

And if so, are they worth using? Let’s take a quick look at what else is out there as we see it in our team.

The Standard

Besides Angular (my main go-to when it comes to the frontend development) there is its main rival – React. Since React is a library not a framework like Angular, by definition it gives you more freedom when it comes to the composition of your application and development style that you want to approach. React is known for its JSX syntax which allows you to mix javascript with HTML and CSS code.

Vue.js is different from React in this matter. It is structured like web-component so it’s separated into js, CSS, and HTML. Another thing that differs Vue.js from Angular and React.js is its origin. Vue is the only “independent” framework. What do I mean by that? There is no big company behind it like in other cases where Angular comes from Google and React has been created by Facebook. Vue.js is a better choice than Angular and React when you are looking for a small app or a quick MVP development. That is because setting up a project and its configuration in Vue takes much less time than in frameworks mentioned earlier.

Okay, but where’s the new stuff you say? There you go:

Web Components

Web components as it states on its website are: “…a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.”.

So essentially what it means is that you can create universal components with Web Components API which you can use with literally any framework (or no framework at all) that supports HTML and these components should work correctly on all modern browsers.

Probably the most popular library for creating web components right now is Polymer.
Polymer is a JavaScript library based on Web Components API created by Google employees.
Most important reasons for why Polymer is favored by Web Components developers are:
• Data binding – Connects data from a custom element to its local DOM element. Both one-way and two-way.
• Polymer CLI – Includes a build pipeline, a boilerplate generator for creating elements and apps, a linter, a development server, and a test runner.
• Conditional and repeat templates – Gives you the ability to use loops and if statements in HTML
And there’s much much more.

WebAssembly

A different approach was proposed by creators of WebAssembly which basically allows you to use low-level languages like for example C, C++, and Rust to create web applications by compiling them to WebAssembly binary instruction format – assembly-like language that runs with near-native performance.

You probably wonder how is it possible to develop a web app with this kind of languages. Well, Wasm (WebAssembly) provides you with JS API, which contains all the functionalities that you would need in web development.

So is WebAssembly going to replace JavaScript in the web development world?

Not really. It is more of an addition to the current web technology stack. Wasm should be used in certain situations, and that situations are asset-heavy performance-needing applications. Usually with a lot of computations and 3d dynamic scenes. Here are a few examples of Wasm applications that should give you an idea of what I am talking about: Google Earth, Figma, AutoCad web.

Flutter

Another tool on the list is Flutter. Flutter originally was supposed to create mobile applications (and it still does), but in Flutter 1.9 web support has been added.
Flutter uses Dart language and only this one language is used to develop applications for every intention is its frontend, backend, or mobile devices. So in theory your code for a mobile app or web app should not be that much different from each other.

One interesting thing about Flutter is a fact that it has built-in Material Design and Cupertino (iOS styled components) so it comes with a variety of very useful widgets and other advantages that those UI libraries offer (like motion APIs), you can check those out here.

This was just a really brief introduction to different frontend options out there, I’m going to make more detailed insight into those in next blog posts.

Now, at last, but not least:

Svelte

Svelte has been introduced in 2016 by its creator Rich Harris. Stating that it’s going to use a truly reactive approach, but before we get into it let’s quickly describe what Svelte actually is.
Svelte is a JavaScript component framework similar to React or Vue but with a few major differences.

Probably the most important difference is the fact that Svelte does not have a virtual DOM. React and Vue both are using Virtual DOM and because of that, the browser itself has to convert their declarative structures into DOM operations. I won’t go into details of how does virtual DOM works, but basically, what it does it checks the state of the whole application before and after the change and looks for differences in those both states and then applies what’s different to real DOM (this operation is called diffing), sounds like a lot of unnecessary comparisons, right?

Here comes the reactivity.

Svelte unlike React runs at build time which means that svelte code is compiled to imperative code which updates DOM when and where it needs to. This is obviously a big performance boost.

You probably started to wonder why is virtual DOM used by those big frameworks like React or Vue then. I think I can use a quote from the Svelte creator’s blog:

“Virtual DOM is valuable because it allows you to build apps without thinking about state transitions, with performance that is generally good enough. That means less buggy code, and more time spent on creative tasks instead of tedious ones. But it turns out that we can achieve a similar programming model without using virtual DOM — and that’s where Svelte comes in”

Another thing that Svelte introduces is its own reactive statements which look like this:

$: console.log(`the count is ${count}`);

Essentially what it’s going to do is – it is going to log the string whenever count property changes and the only thing that you need to do to use it is to put $: in front of a statement which you want to become reactive. To give you a better idea of how is it working I’m going to create a component in which you can type your first name and last name assign them to fullName property and display it.

<script>
 let firstName = '';
 let lastName = ''
 $: fullName = firstName + lastName
</script>

<input bind:value={firstName}/>
<input bind:value={lastName}/>
{fullName}

I will not go into details of everything that’s happening here but what you should know that bind:value is a two-way binding so the properties are being updated while typing in the input. The important part here is the dollar syntax. Thanks to it fullName property is changed at the same moment as user is typing anything in any of those two inputs.

Of course, nothing is stopping you from writing a larger code with dollar syntax. If I wanted to update fullName only if firstName starts with letter “A” I could write something like this:

let fullName = '';
$: {
  if(firstName[0] === 'A') {
      fullName = firstName + lastName;
   }
}

Now, to display the difference in code written in React (which Svelte is most of the cases compared to) and Svelte. We’re going to create a simple app that is going to display how many seconds passed since it’s creation. (Inspired by Stateful Component on React website).

Here’s the code which you would write in those two frameworks:

React:

class Timer extends React.Component {
    constructor(props) {
      super(props);
      this.state = { seconds: 0 };
    }

    tick() {
      this.setState(state => ({
       seconds: state.seconds + 1
    }));
    }

    componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000);
    }

    render() {
      return (
       <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

ReactDOM.render(
<Timer />,
document.getElementById('timer-example')
);

Svelte:

<script>
 let seconds = 0;
 setInterval(() => seconds += 1, 1000);
</script>

<div>
Seconds: {seconds}
</div>

You can see the difference right?
Both of those applications do exactly the same job, but it is immediately noticeable how much code was needed in the React app and also how readable it is with its state, setState, and rendering functions. At the same time, Svelte requires about 8 lines of pretty, easily understandable code to get the task done.

If you are interested in what else Svelte has to offer and to understand better why this framework could be worth trying I deeply encourage you to watch Rich Harris speech.

Artykuł What’s after Angular? pochodzi z serwisu Inero Software - Software Consulting.

Novelty keeps knocking on our door

We’ve talked a lot about the changing environment in which we operate nowadays – either as individuals, enterprises or society as a whole. Certain voguish buzzwords, such as the Fourth Industrial Revolution, Industry 4.0 (its subset), or digital transformation can serve as useful labels to name some of the processes powering the onset of a new era.

And while it’s less clear than when we switched from steam to electricity or from analogue electronic technology to digital electronics, the irreversible shift from simple digitization to innovation, based on combination of technologies (IoT, AI, robotics, augmented reality, 3-D printing, etc.), is forcing companies to reevaluate the way they do business.

Behind the lingo

‘Fourth Industrial Revolution’ is a term first introduced in 2015, which encompasses the age of technologies that combine hardware, software, and biology (cyber-physical systems), highly advanced in the spheres of communication and connectivity. The current time is being marked by breakthroughs in emerging technologies in fields such as robotics, artificial intelligence, nanotechnology, decentralized consensus, quantum computing, biotechnology, the Internet of Things (IoT), fifth-generation wireless technologies (5G), 3D printing and fully autonomous vehicles.

‘Digital transformation’ on the other hand covers the fast-paced and profound metamorphosis of business and organizational processes, capabilities and models, designed to enable growth with a mix of digital technologies. Although chiefly used in a business context, digital transformation also impacts governments, public sector agencies and various organizations which are involved in tackling societal challenges.

Who thrives in the current era?

Among the new desired competencies to attain with the use of the new tools are the capacities to be more agile, efficient, people-oriented, well-organized and able to change the status quo for the purpose of gaining new information and service-driven revenues. Some of the new digital solutions enable also new types of innovation and creativity, and these companies which strive towards continuous optimization across processes can truly have the chance to become leaders in the digital solutions realm.

Although already underway, digital transformation is not proceeding at the same pace everywhere. European consumers are heavily invested in digital technologies, however, the EU businesses have a long way to go to fully explore the potential of digitization. As European Commission’s 2019 Digital Economy and Society Index (DESI) shows, Finland, Sweden, the Netherlands and Denmark have the most advanced digital economies in the EU, followed by the UK, Luxembourg, Ireland and Estonia. On the opposite pole are Bulgaria, Romania, Greece and Poland, who score the lowest on DESI.

In a ‘Business digitization’ category – encompassing electronic information sharing, use of social media, big data analysis and cloud solutions, as well as e-Commerce – the highest level was reached by Ireland, followed by the Netherlands, Belgium and Denmark. When it comes to e-business technologies, the leading countries are again the Netherlands, Finland (forerunner in the use of cloud solutions) and Belgium (the most advanced in electronic information sharing).

As regards governments, which can make a very productive use of digitization by lifting the administrative burden off of citizens and firms – non-other state than Estonia has one of the most advanced e-governments in the world, with 99% of public services available online and 96% of people filing their tax returns electronically.

Digital business transformation areas

Among the domains predisposed to be subjected to digital transformation are business ecosystems, models, and processes, business asset management, organizational culture, partnership models, customer as well as worker and partner approaches.

Let us take a closer look at the issue of business processes and the question of how we can model them. Each business process is a collection of related, structured activities that happen within an organization or company, aiming to bring about a specific, desired effect. A business process is, for example, issuing of invoices. Namely, all the activities that run in a company from the moment a need to issue an invoice arises. This supposedly trivial example is in reality a quite lengthy business process that goes through several departments in the company until the entire process of a sale of a service or a product is finished, so a proof of purchase can be issued.

Of course, there is a plentitude of processes like this. They take place not only in companies but also in institutions, foundations and sole proprietorships. As a result of their complexity and distinctiveness, a management branch encompassing business process management and systems engineering was created, called: Business Process Modeling (BPM). BPM is the action of representing processes of an enterprise in order to analyze, improve, and automate them. The simulation is commonly performed by experts comprising business analysts, who provide expertise in the modeling discipline and subject matter professionals, who have specialized knowledge of the processes being modelled.

Approvals – flowchart of a business process; source: Wikipedia

Valuation of the benefits to digital transformation

The act of describing all stages of a particular business operation in the form of a model allows us to simulate how a business process progresses and capture the space for automation. It may expose some previously unidentified steps as suboptimal or unnecessary, in case unassociated people from different departments, responsible for only slices of the process, have not realized they were duplicating the work of their colleagues.

The traditional modeling tools were introduced to illustrate time and cost, while modern tools focus on improving multidimensional, cross-functional activities. New methodologies, aimed at streamlining commercial operations, include business process redesign, business process innovation, business process management, or integrated business planning, to name a few.

Business process modeling is primarily intended to enable attaining higher quality with lowered operational costs and less downtime, as well as to elevate customer satisfaction, but it also serves as documentation and formalization of the workflow.

BPMN Process that has two decisions in the process flow; source: Wikipedia

Description and simulation of business processes

As more and more IT systems were being developed and implemented in ever larger companies, every so often understanding of business processes would become difficult. The reason behind it is a continual specialization of various industry segments, which makes it difficult for the programmers who automate business processes to understand them in their entirety. One of Inero Software’s cases was the task of automating the process of settling water and rain fees in the port of Gdynia. In order to program and improve this business process it required us to understand the specificity of the business that runs outside of our area.

An activity that aims to present business processes in such a way that they are understandable for both IT specialists and those who carry out these processes (non-IT specialists), is called Business Process Model and Notation (BPMN) – a standardized way of recording business processes. The motor behind its creation was the aforementioned intercommunication challenge. BPMN allows you to not only describe particular business processes, but also model them after they have already undergone a digital transformation. It is supported by over 70 various tools, among others iGrafx, ADONIS, Borland, DYSANT and IBM tools.

Even though describing business processes with BPMN is more tricky to execute at large companies, it occurs there more often, as the gains are much more tangible. In a large company, divided on various departments, where daily interactions with people who often do not know each other or are located in different buildings or cities are limited, deploying BPMN to business processes not only grants us a view of all their stages, but also enables us to pick up substandard actions, making a huge difference in running smooth operations.

There’s no end to innovation

Even though BPMN represents just a fraction of the methodologies used over the years to document business processes, it’s certainly a good step into the digital age. More than just a buzzword, it’s a crucial element of ongoing technological evolution and innovation with a clear purpose, namely to allow us to enrich the overall culture of the professional activities we execute.

Inero Software provides knowledge and expertise on how to successfully use cutting edge technologies and data to shape corporate digital products of the future.

In the blog post section you will find other articles about IT systems and more!

keywords:

#DigitalTransformation, #FourthIndustrialRevolution, #Industry4.0 #BusinessProcess #BusinessProcessModeling #BusinessProcessesOptimization, #BPM, #BPMN, #ProcessThinking

Artykuł A Holistic Digital Transformation – the Key to Business Optimization pochodzi z serwisu Inero Software - Software Consulting.