Forem: KristijanFištrek

I made an Android App in a week.

KristijanFištrek — Thu, 02 Jul 2020 08:38:51 +0000

First things first, I made an Android App. 🎉 🥳

You can check it out here: My awesome & free app

Technologies used:

Angular/Ionic

Firebase

Node.js/Express.js

Currently I'm in the process of making a website version of this app, which will be done in React (I know, I know...) and for that I will need a more solid back-end system, which I've started to move from Express to Spring Boot.

Considering how much data and instant verification I'll need to do, I am looking into GraphQL as my Postgres layer. I believe it will enable me to query exactly what I need without overloading my website or my app with additional data which I am not using.

Let me know how you like it in the comments below, leave your opinion, critique, advice or let's just talk about tech!

Is anyone interested in Ionic/Angular tutorials or some tricks & tips?

Take care good people! <3

Deploy Springboot App to Heroku with Github

KristijanFištrek — Mon, 25 May 2020 10:00:52 +0000

Hey good peeps, long time - no hear.

In this quarantine time I bring you something I've been working on lately, CD (continuous deployment) of Springboot apps.
I hope you'll find it useful.

1. Introduction
2. Create a Github repository
3. Initialize the Springboot Application
4. Create a Heroku account
5. Connect with Github & Deploy
6. Test & Celebrate
7. Conclusion

1. Introduction

In this short little blog we'll initialize the simple Springboot application, connect it with Github, connect it with Heroku and at the end we'll deploy our Spring application with incredible ease and what's most important, absolutely free of charge.

First, make sure you have a Github account and that you're familiar with the basic git commands such as ''git clone'' – ''git commit'' and ''git push''.
Of course, you can use whatever SVC tool you want, but we won't be covering the likes of Gitlab, Bitbucket and similar here.

Second, make sure you have IntelliJ or other Spring IDE where you can build, run and debug your Springboot applications.

Third, have fun!

2. Create a Github repository

First things first, we want to establish a Github -> Heroku connection, so whenever we merge into our master, we'll instantly publish, build and deploy our app on Heroku.

You can have multiple git instances in one folder, because Heroku provides its own git, but that is too troublesome. We'll use our Github repository as a single point of source control.

Here are the steps I've followed:

Another useful information is committing & pushing the data in your repository.

3. Initialize the Springboot Application

To initialize our Springboot application with ease, we'll use https://start.spring.io/ - excellent tool to kickstart your base application settings with dependencies you need.

Feel free to select whatever you like, but for the purposes of this tutorial let’s just go with the basics.

After you have selecting the settings you like or the settings from the picture above, let's click on Generate and save it inside of your git repository we have cloned in the second step.

Before you do anything else, make sure to run your application in the IDE of your choice, mine is IntelliJ, and build it just to make sure everything runs smoothly.

If everything is alright, you should see something like this:

If some of your files are colored red, have no fear, it is due to git being too smart. He recognized new files in the directory and he is letting us know we haven't committed then yet, we'll do that in the moment.

Let's just create a simple controller, something that will display a generic message. That generic message will serve as a confirmation that everything was deployed smoothly.

If your Spring annotations are red, be sure to add this in your pom.xml and update your Maven settings:


        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>5.0.7.RELEASE</version>
        </dependency>

Before we create a heroku account, let's push the changes to our repository.

You can do it directly from IntelliJ or the IDE of your choice, but this time I'll do it with Git Bash.

Navigate in your working directory, open Git Bash and let's commit!


git add -A

git commit -m "Master: Initial commit"

git push

If everything was successful, you should see the files in your Github repository.

4. Create a Heroku account

First things first, sign up for Heroku: https://signup.heroku.com/
After a successful sign in, your dashboard should look something like this.

I already have one Java project, so just ignore that one.

Even though Heroku provides its own CLI, we'll be using our Heroku dashboard for creating our application and we'll use Github Bash once again for all of our git purposes.

Now let's create our app by click New -> Create new app in the upper right corner.

Then you'll need to provide a name for your app, feel free to name it whatever you like.

And voila! You should see something like this.

5. Connect with Github & Deploy

In this next step we'll continue where we've left off.

On the previous screen, you should see the section Deployment method, by default Heroku Git should be selected.

Since we're be using our Github repository for continuous deployment here, make sure to select Github option like this:

As you may have assumed, to connect Heroku with our Github account, we need to proceed with this step by clicking on Connect to Github button down below.
Once clicked, and you're authorization was successful, you should see a screen like this one:

Search for your repository in Search for a repository to connect to section, it should look like something like this:

After you successfully connect with the desired repository, make sure to connect master as a deployment branch and click on Enably automatic deploys and voila, our connection is established!

6. Test & Celebrate

The last step in our process is making slight adjustments in our app and publishing to our master branch.

Head into our app, change the text in our @GetMapping method.


@GetMapping("/")
    String hello() {
        return "This tutorial is the best. All hail the great Kristijan.";
    }

Now let's repeat our Git Bash commands from before.


git add -A

git commit -m "Master: Text changes"

git push

Head over to Heroku and click on Open app in the upper right corner of our Heroku Dashboard.

And voila! You should see the message This tutorial is the best. All hail the great Kristijan. displayed on your screen.

7. Conclusion

If you're having any issues with setting this up, feel free to contact me or leave a comment in the comment section, I'll get back to you as soon as possible.

Few to things to keep in mind:

Your application goes to sleep after 30 minutes of being inactive
Your app can't be online 24/7, otherwise you'll run out of your free Dyno hours - If you choose to enter your credit card number, you will get extra 400-500 Dyno hours
Metrics are not available for free users, you'll have to upgrade.

Hosting your Java apps on Heroku, or other apps in general, is simply too easy and amazing. Even the paid plan offers extraordinary options and it would probably cost way more if you were to set it up yourself + considering the maintenance and security of the server.

However, Heroku may not be the tool for every occasion and everyone in the development world. It has its pros and cons, so make sure to weight them in carefully before deciding.

Until next time, stay awesome.

I made a Hack Quiz in 48 hours.

KristijanFištrek — Sat, 04 Jan 2020 14:12:41 +0000

Hack This Quiz

In short, I wanted to challenge myself and I made a hacking quiz in 48 hours with Vanilla JavaScript and Firebase.

Look at it here: https://hackthisquiz.firebaseapp.com/

How to play?

Basically, it's really simple.
You need to insert a password to move forward and collect all the points.
You are given a paragraph of text and occasionally a hint which helps you and directs you toward finding the correct password.

Use any means and knowledge necessary in order to find a password!

Why?

Obviously not to practice UX and UI. :D
The application has a terrible UX and UI design, mainly because I wanted to focus on learning MVC in Vanilla JavaScript and most of how to handle Firebase for database management, user management, deploy and hosting purposes.

I want to challenge myself in 2020. to learn as much as I can about certain technologies. Coming up and completing these little challenges help me stay alert and sharp.

Closing words

Feel free to play it and make sure to tell me how'd you like it!
I am opened to have a meaningful discussion about improvements, questions, UI/UX or any kind of advice you can think of.

Let me know in the comments below if you've played it and let's chat about it!

Have fun! \m/
Stay awesome!

JavaScript Design Patterns - Factory Pattern

KristijanFištrek — Sun, 10 Nov 2019 16:33:24 +0000

Welcome to my new development series where I try my best to explain design patterns by using JavaScript!

What is a design pattern?

In software engineering in general, a design pattern is a reusable solution, or better yet a blueprint or a template, that we can use in different situations and programming languages in order to solve every day development problems.
They are formalized best practices which developers can follow when designing and developing a software application.
Design patterns can speed up the development process by providing tested and proven development paradigms.

There are different types of design patterns out there.

Some of the main categories are :

Creational patterns
Structural patterns
Behavioral patterns

Today we will be discussing the factory patterns which falls under the creational category.

Why should we use the factory pattern?

Factory pattern is often times used in situations where you need to deal with potential problems which occur when creating objects.
Especially in situations where you need to create many different types of many different objects.

In that case, factory pattern enables you to call a factory method - specified in an interface or implemented in a base class - which handles the creation of objects instead of a constructor.
By calling a factory method you avoid reallocating memory for each object you create, instead a factory method does that only once when it's called.

To put it simply, our factory method is a centralized place or better yet, a factory that manufactures different types of objects.

How can I use a factory pattern?

Disclaimer - In this situation, you are free to use any of the design patterns you like and develop you own solution. I do not explicitly claim you should only use the factory pattern if you encounter a situation like this.

Let's imagine a following scenario.

You have been hired to develop an application for a car shop. The owner of the car shop wants an easy to navigate interface with the ability to document all the types of vehicles that he fixes in his shop. On a daily basis, through his and his employers hands pass around dozen different types of vehicles. You need to find a clean and concise way to insert all those types of cars into your database.

For this example, and since I've learning more about it in the past few months, we will be using JavaScript.
Important thing to notice is that these kind of patterns are not language specific, you can use them with any language you like.

First of, let's assume that our mechanic works only with trucks and cars. Even though there's a lot of different types of trucks and cars, let's limit ourselves, for the purposes of this tutorial, to only this 1st class hierarchy of our vehicles.

So with that in mind, let's create our two classes for those two categories of vehicles.


function Car(name, type) {

  this.name = name;
  this.type = type;

}

function Truck(name, type) {

  this.name = name;
  this.type = type;

}

This seems pretty primitive and basic, there are better ways of doing this with the class keyword implemented in ECMA2015, but keep up with me.
With these foundations structured, let's create our factory method.


function VehiclesFactoryMethod() {

  this.create = function(name, type) {
      switch(type) {
         case "Car":
           return new Car(name, type);
         case "Truck":
           return new Truck(name, type);
         default;
      }
  }

}

With our factory method in place, we are ready to use it for our object creation!
Let's test that out.


// Let's instantiate our factory method object.
const VehiclesFactoryMethod = new VehiclesFactoryMethod();

// This array will simulate our Database for the purposes of this tutorial
const vehicles = [];

// Let's fill our array with some vehicles!
vehicles.push(VehiclesFactoryMethod.create("BMW", "Car"));
vehicles.push(VehiclesFactoryMethod.create("MAN", "Truck"));

Let's test this out!
For further testing purposes, let's create a display function.


// This function will output the inserted vehicles in a more stylized context 
function print() {
   console.log("Database of our vehicles : ");
   console.log("Name: " + this.name);
   console.log("Type: " + this.type);
}

// Let's loop through our array of vehicles 
// And call **showVehicles*** method to print them out.
vehicles.forEach( vehicle => {
   print.call(vehicle);
});

// If we have done everything correctly, this will be our console log output 
// Database of our vehicles : 
// Name: BMW
// Type: Car

// Database of our vehicles : 
// Name: MAN
// Type: Truck

With this setup, every time we want to create a new object of either a Car or Truck class, all we need to do is call our VehiclesFactoryMethod, pass the needed attributes and the factory method will take care of all memory allocations and object creation you need.

Conclusion

Use the Factory Method when you don’t know beforehand the exact types and dependencies of the objects your code should work with.
Use the Factory Method when you want to save system resources by reusing existing objects instead of rebuilding them each time. You often experience this need when dealing with large, resource-intensive objects such as database connections, file systems, and network resources.

Pros :

You avoid tight coupling between the creator and the concrete products.
Single Responsibility Principle. You can move the product creation code into one place in the program, making the code easier to support.
Open/Closed Principle. You can introduce new types of products into the program without breaking existing client code.
Memory preservation and greater control over your objects

Cons :

As far as my experiences go with the factory method, the only con I've fond so far is that the code may become more complicated since you need to introduce a lot of new subclasses to implement the pattern. The best case scenario is when you’re introducing the pattern into an existing hierarchy of creator classes.

Should you use a factory method?

Absolutely yes!

It depends on you where and how you will use it.
I have found it extremely useful in many cases.

If you have known about the factory pattern before this article, comment down below where and how are you using it.
I'd like to know more about it and discuss about potential improvements.

See you next Sunday when we will go through another design pattern!

Angular - Let's build an app together | Part 1

KristijanFištrek — Tue, 27 Aug 2019 10:01:51 +0000

Hi there again guys & gals of Dev.to!

Welcome to the first part of the series ,,Let's build an app together'' where I'll do my best to take you through the process of building a REST API Angular application.

I am not an expert when it comes to Angular, so feel free to correct me down below.

Without further ado, let's start!

What we will be building
Setting up the environment
Hello world
Setting up the project
Design
Modeling your JSON data & display
Additional tips & tricks

1. What we will be building

In short, we will be building an application that will receive data using NASA's open API. We'll be using some cool features that the API offers and we'll display some data on the screen.

Pretty cool stuff!

Take a look at the final product :

Bear in mind that I am not a grand designer, and I primarily want to focus on the logic and the most appropriate way of handling the data, you're free to design your UI in any way you want to.

2. Setting up the environment

First things first.

In order to create your Angular application, you need to have Node.js installed locally.

To do that successfully, follow these steps :

Visit https://nodejs.org/en/download/
Install version 10.9.0 or later.

Why are we doing that?

Well according to Angular Wiki and a bunch of other articles online, the reasons for Node.js & Angular 2 combo are as follows :

Node.js includes NPM, we need NPM because most of Angular 2 packages or libraries are distributed as different NPM packages.
Angular 2 mostly works with Typescript. Browsers can not understand Typescript syntax, therefore we need NPM in combination with Angular CLI to compile the Typescript into plain good old JavaScript.
We will be using Angular CLI to automate all the compiling, building and minimizing, and that is where certain NPM commands will come in handy!

To make sure we've installed Node.js , and with it the famous NPM environment, try this :

Run npm -v in your console to make sure the installation was successful. You should get the result similar as in this picture below :

If the version of npm is displayed, congratulations, you just installed node.js!

P.S. - Yes. I'm one of those Linux nerds.

3. Hello World

Let's open our consoles/terminals/command prompts one more time ladies and gentlemen!

Open your terminal and type in cd *desired location* where as the desired location is the folder inside of which you will create your new Angular application.

For example :

1) Let's install our Angular CLI by typing the following command into our terminal :

npm install -g @angular/cli

Check the version of your Angular CLI by typing the following command :

ng --version

You should get something like this :

If you get this kind of output, we're halfway there to fully setup our project!

2) We can easily create the default instance of our application by using the following command :

ng new ourNasaAPP

Let's recap this command very shortly.

ng is the basically a built in directive which in short stands for ,,Angular''.
new is another built in directive which will tell our Angular CLI that we would like to create a new default instance of our application.
ourNasaAPP that is just a name we'll give to this application.

After we type in ng new ourNasaAPP we'll have to go through a short process of successfully defining our default app.

The process should go something like this :

Create a default instance of your app with ng new

When asked about the routing, select yes by typing y and pressing Enter.

Let's select SCSS

By selecting SCSS, Angular CLI will start building your default Angular project and you should see something similar to this when it is done :

You might get some warnings by default, certain npm packages may not like something, but essentially if you don't get critical errors or your application to instantiate, you shall be fine.

We can check if our project instantiated properly by typing the following command , which will start your application and open it in your default browser :

ng serve --open

You should see something like this :

If you get this screen, congratulations!
You just created your first Angular application!

Closing words

With this I would like to conclude the first part of this series.

Getting into further functionalities opens up a whole new spectrum of development that I would like to keep for upcoming parts.

I certainly hope you have found this helpful and useful.

A lot of interesting things are coming next!

What's next?

Setting up the project

In this section we'll explore what we need to properly handle API responses and so to speak model our data within the application.
We will take a closer look into models, components and services.

Design

We will take a look at the most appropriate design according to the data we shall receive.
We'll dive into how to setup NGX-Bootstrap and use some its awesome features!

Modeling your data & display

We might touch upon the subject of modeling your data in the Let's Build An App Together part 2.
If not, it will certainly be included in the part 3 of the series.
This section is reserving to further explain how we will build our models, services and components.
We will touch about the best practices in modeling your API data and I will show you the way I am doing it.

Join me in part 2 - coming soon!

What cleaning my room taught me about programming.

KristijanFištrek — Tue, 30 Jul 2019 09:04:15 +0000

Disclaimer

I am still learning how to organize my projects.
I am in no way an expert and my advice should be taken with a grain of salt. I have however noticed certain problems with my previous setup, I've adjusted it and immediately saw improvements.
I'd like to share my story and hopefully help some of you.
Feel free to leave your advice down below if you see something stinky

Foreword

We've probably all heard the famous saying : ,,Go and clean your room!''
And probably all of us, sometimes in our lives, have answered :
,,I can't right now! I'm like doing something really, really important!''.

As a self-proclaimed ''creative'' person, I have defended my creative mess with all my strength.
I've explained in thorough detail how 20 layers of t-shirts across my chair actually helps my everyday decision making and how my table is not messy, it is perfectly organized in well thought-out sections that speed up my process of finding things.

But the harsh truth about creative mess hit me on top of my head many years down the line.
I've been told that creative mess, at the end of the day, is still a mess.

Me : ,,How dare they, those pathetic simpletons will never grasp the astronomical importance and the technical complexity with which I'm conducting these creative procedures that enable me the efficiency and productivity of nothing short of a God!''
I humbly thought to myself.

As my view has once again fallen upon the creatively designed 20 layers of t-shirt lounge chair, a small voice from the back of my head whispered : ,,Maybe they're right...''.

And unfortunately, they were right.

With watery eyes, I mumbled : ,,Goodbye, 20 layer/high profile/one of a kind/customized lounge chair worthy of nothing short of a God...goodbye.''.

Illusion of a clean work space
What happens now?
Examples
Closing words

1.Illusion of a clean work space

Don't get me wrong, creative mess is a wonderful thing, until someone other than you needs something from it.
I still remember when I tried to navigate my brother, over a 20 minute phone call, to read some numbers off of the specific document buried away in my room.

All things have a tendency of succumbing to entropy, even more so if those things are not taken care of.

I had the uncomfortable privilege of experiencing such fate with software projects, mostly my own.

At the beginning of a project, be it a bigger software application or a smaller website, sooner or later the code will pile up.
As little bits of your code are being added in your application over a longer period of time, you don't have a feeling like things are getting messier, just like the frog doesn't experience water getting slightly warmer, until it's cooked alive. Too dark, Kristijan...too dark.

But how should I know before hand how to organize my projects?
I don't want to be cooked alive!

No worries, young padawan.
I am here to tell you that...I have no idea.
Like, I'm still learning this stuff myself, it depends...it's super hard...I can't even...I mean, where to start?

Nahh, I'm just kidding...well, not entirely.

Organization of your projects and how detailed it must be definitely depends on the technology you're using, how robust the application is and definitely on how many people are working on it.
There isn't one size fits all in this case, unfortunately.

But what I have noticed as a consistency, throughout the projects I was working on, is the collaborative effect of the team in establishing the architecture, the scale of it and defining the necessary steps that each developer can follow in order to write better, consistent and clean code while keeping the file structure concise and neat.

If I can sum it up in a few steps, it would be :

Talk first, code later
Clearly define the architecture and the necessary tools
Write down, if you have to, the rules that ensure consistency and clean environment according to the predefined architecture
Don't crash and burn

2.What happens now?

Taken into account the steps I've aforementioned, let's put it in perspective.

Recently I've marched into a project, which I'll post more about here pretty soon, that is in-visioned to unify Nasa API's in one place.
This is my story.

1) Talk first, code later

By talking about the project, you put yourself in a different position.
Preferably in a position of someone who will be using the app, since we as developers often get stuck in a mindset of someone creating the app.

You discover new angles from which you can tackle certain problems and hopefully start thinking about design that is suited for the users, not the design that you want to see.

With that in mind, I wrote down the key points of my application, alongside with the key issues that I will potentially face.
Of course, you can not cover every little detail in this segment, but it's kinda important to set the proper base of your project, upon which you can fluently build every future release.

2) Clearly define the architecture and the necessary tools

Architecture was supposed to be designed in a way where we could efficiently and fluently grab the results from the API, map it to our predefined models, functionally sort the data and feed it to the front end.
That communication needed to be as fast, fluent and clean as possible.

During the talk bit, we clearly all agreed upon using Java Spring on the back-end and Angular 7 as our main front-end tool (triggered comments ahead). Even though it can be robust at times and it definitely serves more as a tool to handle big enterprise applications, it perfectly met the requirements and needs we all had.

Just a heads up, not a line of code was written yet.

3) Write down, if you have to, the rules that ensure consistency and clean environment according to the predefined architecture

Immediately, the clear and concise Git flow instructions were written down.
Source control is a major thing and a quality Git flow can really save the day down the line.

Alongside of that, agreement was made regarding how our folders should be structured and what the naming convention shall be.

An example of our app folder is as follows :

It is slightly different at the current stage

Therefore, everyone was able to easily orient themselves within a project and maneuver their way through the application.

Everyone was informed and on-board regarding the naming conventions and logic flow of the application, which means we all followed the hierarchical rules about what our services should do, how our components should look like - or in the case of Angular, how dumb should they be - and last but not least, how our syntax would look like.

We've also used tools like Prettier to keep our TypeScript/Javascript syntactically consistent + tools like Husky & E2E test tools to make sure our code is somewhat bulletproof - I'll touch upon this subject a bit more in future posts.

4) Don't crash and burn

Seriously, it's easy to get tangled up in all the procedures, workflows and get burned by the process of trying to make everything perfect.
It's nearly impossible to predict everything, it is crucial for you to remember that mistakes will find their way into your projects and you will inevitably have to go back and fix some things.

Don't stress too much about it. Know that you're doing your best and keep at it.

3.Examples

If you are further more interested in the subject, check out the links below for further detail :

I've applied this principle to the smallest of my projects.
For example, my web portfolio, which is composed of only HTML, SCSS and Vanilla Javascript, has the following structure :

Now if anyone needs to get into my room, figuratively speaking, and needs to do some adjustments in my services part of the room, he or she would be able to do so effortlessly.

Closing words

What is the connection between your room and your code?
I still don't get it man.

I talk a lot. Let me summarize.

As I started to keep my living environment in check, suddenly like the stars aligned, I gained greater insight how everything is at the length of my hand and I knew where every little thing is.
Finally I didn't have to spend too much time looking for trivial things, and most importantly, if anyone needed anything from my room, it was extremely accessible and organized.

The same principles, in my humble opinion, should be applied to our software projects.

Sooner or later someone will inherit your code.
Make sure it represents your coding skills as much as your organization skills.
Keep your room clean.

Javascript pattern that changed everything (for me...)

KristijanFištrek — Sun, 28 Jul 2019 11:10:47 +0000

Foreword

Hello there good people of Dev.to & welcome to my first Dev.to post!
I've been a member of this community for a while and finally decided to contribute & share my thoughts about a subject I'm passionate about.

I am still learning all the ways in which I can use the forthcoming pattern, so feel free to correct me down below if you see something stinky.

What will this post be about?

A short table of contents :

1) What is IIFE?
2) JS pattern that changed everything...
2.1) Advantages
2.2) Disadvantages
3) Examples
4) Closing words

Let's get into it!

1. IIFE

Before we head into explaining any sort of javascript design pattern, I think it's worth mentioning IIFE.

What is IIFE?

IIFE stands for immediately-invoked function expression or Self-Executing Anonymous Function.
In simple terms, it is a block of code that is invoked or called as soon as the file is executed.
And it looks something like this :


(function() {

})();

In not so simple terms, it is a way of encapsulating your functions within a scope that will keep it away from the global scope, which might be a tricky place in the javascript world.

It consists of primarily two parts :

First part is an anonymous functions enclosed within a grouping operator () which limits the access to your data within the function and as we said before, keeps it away from the global scope.
The second part creates the immediately executing function expression (); through which the JavaScript engine will directly interpret the function.

If you're curious about it and want to learn more, since I want to put emphasis on the javascript patterns here, you can read more on : https://developer.mozilla.org/en-US/docs/Glossary/IIFE?source=post_page---------------------------

2. Javascript pattern that changed everything

A pattern that changed everything, at least for me, is : drumroll

Revealing module pattern

Example:


var module = (function() {

    function _setName() {
       console.log("My name is : Slim Shady");
    }

    return {
       init: _setName
    };

})();

module.init();

You might see something familiar, and if your guess is IIFE, then you're completely correct.

Revealing module pattern, just like many other javascript patterns, takes advantage of IIFE to hide the functionalities of your code from the global scope, and enable you more consistency and re-usability.

All the properties you declare within the IIFE scope are inherently private, and you decide what you will expose to the outside in the return segment of our code.

Now let's break down our example from above.

1) We've declared an object by the name of module and we've saved in it a reference to whatever our IIFE function holds.


var module = (function() {

})();

2) The next step is to create our private function by the name of _setName() which in our case outputs a generic result.
I prefer to name my private properties with an underscore, it helps me to differentiate them from the rest and makes the debbuging easier.


var module = (function() {

    function _setName() {
       console.log("My name is : Slim Shady");
    }

})();

3) The crucial segment of our example comes in a form a return statement, where we reveal the functionality of our private properties as public.

Since in this example we only have one private property, we shall have only one public property, although examples may vary depending on the complexity of your function.


var module = (function() {

    function _setName() {
       console.log("My name is : Slim Shady");
    }

    return {
       init: _setName
    }

})();

The final step is calling whatever we need through our module object.

By calling our module object we can access everything we've returned as public in our return scope.

Therefore if we type module.init() , in our console we will see the console log from the _setName() function.
That's because our init property stores whatever value _setName function might hold.


var module = (function() {

    function _setName() {
       console.log("My name is : Slim Shady");
    }

    return {
       init: _setName
    }

})();

module.init();

// Console log
// My name is : Slim Shady

For further information that expand beyond this simple example, check out the links below for in depth analysis of revealing module pattern.

Advantages

The big advantage of this pattern is the fact that it allows the syntax of our scripts to be more consistent. It also makes it more clear at the end of the module which of our functions and variables may be accessed publicly which eases readability.

Disadvantages

An uncomfortable disadvantage of this pattern is that if a private function refers to a public function, that public function can't be overridden if a patch is necessary. This is because the private function will continue to refer to the private implementation and the pattern doesn't apply to public members, only to functions.

So care should be taken during the usage of this pattern, because modules created with the Revealing Module pattern may be more fragile than those created with the original Module pattern.

3. Examples

Here are some of the examples of module revealing pattern in use.
Some examples are the direct usage of MRT in some of my projects, and some of them are made up on the spot.

Hopefully you'll find them helpful!

Example #1 - The footer component

This piece of code displays a module revealing pattern that holds the structure of a footer, and basically creates a component which you can re-use throughout your website and save yourself a couple of lines of HTML code.


var footer = (function() {

    var _footerDesign = function() {

        var html = '';
        html += '<div class="footer-content text-center">';
        html += '<small><b>Copyright &copy; Kristijan Fištrek</b></small>';
        html += '</div>';

        return html;
    }

    var render = function() {
        var footerContainer = document.querySelector('footer');
        footerContainer.innerHTML = _footerDesign();
    }

    return {
        init: render
    }

})();

footer.init();

Example #2 - Data storage

This examples portraits a way of defining a certain data set and keeping it structure private.
The only public aspect of it is the object that is returned.


var blogsContainer = (function() {

    var blogs = [
        {
            id: 1,
            name: 'Welcome to my first blog!',
            description: 'Allow me to introduce myself & the content you can expect from me in my blogs. Primarily I will focus on delivering tech driven content, mostly about web development, but I have few ideas about project organization, agile methodology & much more!',
            imgURL: 'assets/img/blogs/1.Welcome/1.Welcome-header.jpg',
            destination: 'pages/blogs/welcome-blog.html'
        }
    ]

    var initialize = function() {
        var contentOfBlogs = blogs;
        return contentOfBlogs;
    }

    return {
        data: initialize
    }
})();

Example #3 - Addy Osmani example


var myRevealingModule = (function () {

        var privateCounter = 0;

        function privateFunction() {
            privateCounter++;
        }

        function publicFunction() {
            publicIncrement();
        }

        function publicIncrement() {
            privateFunction();
        }

        function publicGetCount(){
          return privateCounter;
        }

        // Reveal public pointers to
        // private functions and properties

       return {
            start: publicFunction,
            increment: publicIncrement,
            count: publicGetCount
        };

    })();

myRevealingModule.start();

4. Closing words

I apologize for the long post, I really wanted to cover everything I considered important.
Since this is my first time writing anything on Dev.to, I believe a couple of mistakes have found their way into the content despite my relentless care.

Revealing module pattern is a powerful tool that should be used wisely, it is not perfect for every occasion, but it might prove itself useful in many others.

How did you like this lesson?
Do you think I covered enough?
What else would you like for me to cover?

Let's talk down below.

Cheers people, happy coding.

Web components

KristijanFištrek — Tue, 18 Jun 2019 16:28:45 +0000

I recently really got into web components.

What is your opinion about them?
Good? Bad? Useful? Over-engineering?

Angular (click) - multiple functions?

KristijanFištrek — Fri, 14 Jun 2019 15:10:01 +0000

Scenario
-> on click of a button you need to check data from two functions with (click) attribute.

Do you :
A) create a third function which encapsulates the two & pass that in the (click).
Example : (click)="thirdFunction()"
B) you pass both of them.
Example :
(click)="first(); second();"

What seems to be the best practice for you?

Forem: KristijanFištrek

I made an Android App in a week.

Deploy Springboot App to Heroku with Github

Table Of Contents

1. Introduction

2. Create a Github repository

3. Initialize the Springboot Application

4. Create a Heroku account

5. Connect with Github & Deploy

6. Test & Celebrate

7. Conclusion

I made a Hack Quiz in 48 hours.

Hack This Quiz

How to play?

Why?

Closing words

JavaScript Design Patterns - Factory Pattern

What is a design pattern?

Why should we use the factory pattern?

How can I use a factory pattern?

Conclusion

Absolutely yes!

Angular - Let's build an app together | Part 1

Table of contents

1. What we will be building

2. Setting up the environment

3. Hello World

Closing words

What's next?

What cleaning my room taught me about programming.

Foreword

Table of contents

1.Illusion of a clean work space

2.What happens now?

3.Examples

Closing words

Javascript pattern that changed everything (for me...)

Foreword

What will this post be about?

1. IIFE

2. Javascript pattern that changed everything

3. Examples

4. Closing words

Web components

Angular (click) - multiple functions?