Category: Software

Categories
Software Technology

Front-end history, 2018 trends and Espeo choices

Front-end history, 2018 trends and Espeo choices

Front-end development has changed slightly over last 10 to 15 years. Javascript has evolved the most among the existing programming languages. It turned away from writing simple logic on websites by using ugly, unstructured code and plugins, and evolved into building completely functional Single Page Applications.

Let’s go on a small journey back in time to see how it used to look in the past and what changes have happened over the last couple of years.

The good old days…

Front-end history, 2018 trends and Espeo choices
We are in 2006/2007. It’s a time when most 30+ developers started their careers. Javascript was weak and was not taken seriously. Most developers chose backed languages as their main technology to master. Web applications were using reloads every time a user interacted with UI. AJAX was still something new and was used only for updating small elements on the pages. The key player was jQuery, it simplified DOM data manipulations and added a nice wrapper for asynchronous code. Thousands of jQuery plugins were created which were responsible for specific UI interactions such as sliders, carousels, tabs and many more.

The term front-end developer didn’t exist then. People involved in javascript stuff were called web developers. Their responsibility was to turn designs into fully working web pages. Designers worked closely together, they styled using pure CSS without any any compilers and added  small portions of JS code to make websites more interactive. Various browsers with different capabilities posed a great challenge as they were implementing different standards. This is the era of many browser tricks and hours spent on Internet Explorer 7 support. Any automation like concatenating and scripts minification were done by back-end technologies and in most cases no one cared about it, ending with a long list of scripts and linked styles in html head section.

JavaScript revolution

A few years later, between 2009-2010 a lot of things happened in the front-end world. Many new key players appeared on the scene. It’s worth mentioning about a few frameworks which made a lot of noise at  that time:

  • Backbone JS – It was the first attempt to make a 100% javascript application without any annoying reloads. The idea of Models and Collections behind Backbone made web application development more structured and created with well documented and clear boundaries understandable  for many developers.
  • RequireJS – It was the first solution for module dependency management in JS. It allowed  to split a code into multiple files so it could be downloaded on demand in browsers which was a great step into the future.
  • Sass and Less compilers became mature enough, which meant no more pure CSS, because NodeJs was a toddler compilers compared to other languages like Ruby, Python or .Net.
  • NodeJS – It enabled javascript code to run not only in browsers, it  revolutionised front-end development workflow once and for all.
  • AngularJS – It was the first angular version, which gained a lot of popularity, and most developers turned to Angular world quickly.
  • PhoneGap – It allowed to write html applications which worked  inside iOS/Android WebView, it was not perfect and frequently ended with performance issues because of Webview boundaries but enabled to create their own mobile application knowing only html and js.

Naturally, there is much, much more. Javascript stopped being just an additional technology. Companies started to hire “JS Developers.”

It’s a little too fast…

Frontend history


Evolution sped up after 2010. In the following years, thousands of new libraries appeared. Finally, JS Devs had package managers for dependencies. Most users started with bower and slowly turned into NPM packages when nodeJS started to be more mature. No more keeping all dependencies in projects repositories.

In the “good old days” any attempts to make some automation like concatenating files, minification or images optimization needed to be done outside of the JS world. But change was coming…

New task runners started to appear. Most developers began to use Grunt or Gulp for simple automation. Many tasks appeared for both frameworks allowing the possibility to check JS quality, to concatenate files or even to watch changes in source files to do browser refresh or inject changes asynchronously without refreshing. Both tools started to lose popularity for the  benefit of npm scripts. Small pieces of nodeJS scripts had the ability to do everything nodeJS allowed.

The biggest changes appeared in javascript SPA applications. Developers were inspired by solutions put forward by Backbone and Angular teams and started to recreate and improve on similar solutions.

It’s when: Ember, Knockout, and React were gaining popularity. The last one made the biggest impact in the front-end world for a long time.

Another aspect of the development which changed slightly during this time was the modular approach to development. In “the good old days”, modules in javascript did not exist. The only way to preserve privacy was to use design patterns such as Module Pattern, which were created from an unnamed and immediately executed javascript function. It was the only way not to pollute global scope with everything we have implemented. Require JS mentioned in the previous chapter made some progress here with AMD approach. Another approach which appeared was Browserify, it used common JS modules like in Node JS but inside a browser and it compiled them to a single file which should have been injected in html. Finally, Webpack appeared which became a standard for bundling and dealing with modules for client-side applications.

A big impact, a way of development, was also caused by UI Frameworks. Bootstrap, Foundation and, later on, Material-UI. Each one included a complete set of components, fonts, icons and utils such as the frequently-used grid system. Each one sped up the development process and helped to achieve consistent UI without any additional styling.

Fast and furious….

Few years ago, it was easy to follow all the news taking place in the front-end world. But the popularity of javascript was increasing. More and more developers started contributing to open source projects.
There are now millions of libraries/frameworks/scripts in javascript. Let’s take a simple test:

  • Think of any name of an item not connected with programing, e.g. focus on any home-related ones such as: table, home, knife, doors, bed….
  • Try to google it with “js” suffix
  • Almost every name is a name of a library, npm script or github repository…, you should have 100% match in the first 5 words which popped to your head.
Vue, React, Angular

Almost every aspect of the front-end development has changed. In the case of styling, for a few years, SASS was unquestionably a leader. We have adopted nice architectural solutions for sass such as: BEM or SMACSS . Then there was an idea that styles could be created directly in js tied up to the components with the proper scopes. Currently, there are large numbers of similar CSS in JS solutions.
In the case of SPA application situation is clearer, there are 3 competitors: React, Angular 2+ and a newbie, Vue; a detailed description and comparison of each is a topic for another blog post. Most developers choose one of them. Some people will agree with the image below:

The number of mobile application frameworks for javascripts from which we can choose is also huge. There are: React Native, Ionic, NativeScript, Cordova. React Native is gaining popularity and wider support. We need to choose the mobile app technology for our project carefully, maybe for the simpler ones PWA would be enough?

The first Backbone JS applications were huge and each month the application was getting bigger and bigger. When the bug appeared it was hard to tell in what  state application actually is; if it had been Redux or MobX debugging would  not have been so painful and time consuming.

The world of js is a huge one, and I only mentioned a few core libraries. If we dig into a specific area like SVG graphics, WebGl, Web Components, Server side rendering more and more good, well-known libraries will appear and each one deserves their own article. Server side rendering is a “hot” concept nowadays as we have entered the SPA era, where all content is rendered client side. Still, there are crawlers and social tools which do not understand javascript.
For the all non believers: JQuery is not dead! jQuery is still one of the most popular library on the internet. If you think jQuery is always ‘evil’ please read this.

State of Javascript in 2018

So, what is the current state of javascript? It’s widespread use says it all.

You can check out what the current trends are. Take heed and read the conclusions in each section while choosing the technology for a new project. The newest “hot” technology may not always be the best choice because of the lack of documentation and solved issues. Frameworks which are mature have a lot of contributors. Most errors have already been solved and if a new ones appear, there is always a person who will quickly address our problem and solve it.

How to be a good front-end developer in 2018? Naturally, we all need to follow the news frequently. So much is happening everyday, and it is always helpful to go to news aggregators such as: DailyJs. You will not became a technology specialist simply by reading articles, it just gives you an idea of what to learn next 🙂

A few years ago front-end developers were able to do everything their employer needed. It was not too difficult to be knowledgeable about css/sass, vanilla js, existing SPA frameworks.
Nowadays it’s a bit more complicated, it’s hard to be a specialist in everything and it’s not possible to reach master level in everything related to front-end. We need to specialize and choose our path to become: React, Angular 2+, Ember, Ionic, NativeScript, Styling etc. specialist.

Espeo Choices

Espeo choices

In Espeo we follow current trends. For our projects we use fresh well-known and well documented technologies.

In the case of creating new SPA projects React with Redux and Angular 2+ are a way to go, with increasing React dominance. Developers use React Native or native applications for mobile solutions. However, React Native can’t solve all mobile problems. As far as styling Sass or styled Components are concerned we use them extensively in our projects. Webpack and npm scripts have become a standard for all the projects we develop.

We are open to new technologies and still explore new possibilities such as: Vue, TypeScript, Reason…and many more. Possibly, we’ll only consider a few of them for our future projects.
 
[contact-form-7 id=”13387″ title=”Contact download_8_reasons”]

Categories
Entrepreneurship Software Technology

7 Common Mistakes When Developing MVP

7 Common Mistakes When Developing MVP

Whereas some startups become successful, the truth is that nine out of ten initiatives fail. Introducing a new product to the market is quite risky. In order to minimise the risk, an MVP is created but unfortunately, despite the efforts, some startup owners still fail at this stage.

So, what is an MVP?

Most people think that an MVP is the end product, whereas others think it is a beta version of the final product. However, a minimum viable product (MVP) is a product with just enough features to satisfy early adopters and also to get significant feedback to incorporate it into the final product. It makes potential customers realise what your product is all about.

It is an opportunity to test the waters and garner customer feedback before the final product is launched. Having said that, it is important to avoid these seven development pitfalls so that your MVP will be successful.

1. The Need to Create the complete Product

An MVP is not supposed to be the final product, but it will achieve its goal by subtraction. However, many business owners believe otherwise and tend to include everything the final product should offer. In other words, they don’t just stick to the minimum number of features but include most or all features, also they try to make the design top-notch leaving no space for future changes and improvements.

This stems from the desire to impress the audience. That is why developers feel the need to polish up the user experience, but also more features are added to display the app’s multi-functionality.
Such an approach might turn out to be disastrous especially if the audience rejects the concept despite allocating a big budget. Deciding what features are crucial while developing an MVP depends on two factors:

The feature selection process involves going through the MVP’s goals and objectives as well as customer needs in order to determine only the key features relevant to the goals. Also, outlining each proposed feature and pointing out its specific benefits in relation to the predetermined goals and users’ expectations. This enables you to see clearly and avoid adding unnecessary features at the MVP stage.

2. Striving for Minimalism

But there are always two sides to a story. When you focus too much on minimizing the features of an MVP, you may fall into the trap of excluding the very features that are key for customers. In addition, you might end up choosing the minimal features that are neither in line with your customer’s desires nor with your own goals. As a result, the MVP ends up having minimal features that are useless to potential customers.

As a rule of thumb, remember that it should not just be a minimum but also a viable product.

3. Disregarding the Market Research

Unfortunately, this is among the main reasons why start-ups fail. You need to know your market. Apart from knowing the customers’ needs, desires and wants, you should find out if your idea is innovative or similar to other that already exist.

Unfortunately often, after carrying out market research, some business owners choose to ignore the results altogether. The common belief is that they either know it all or their idea is so unique that will pass the market test anyway. Although there is nothing wrong with believing in your idea, disregarding market research might come at a cost.

Imagine building an MVP only to find out later it isn’t in line with the market’s needs or that it already exists, or that it isn’t unique at all and won’t make a difference in the market. Wouldn’t that be a waste of time, money and resources?

4. Evading the Prototype phase

Prototyping is a very important step while developing an MVP. It is a visual representation of your idea or, in other words, it brings your idea to life, and what is more, it makes the app development process easier. In addition, it is essential as it dispels any doubts the investors might have about the product.

This phase consists of three steps:

  1. Begin with interface architecture and build a basic structure of your product as well as general information related to it. Remember to include an interaction foundation for your application.
  2. Build a sketch, build a low-fidelity interactive prototype – a rough wireframe that maps your app’s information architecture and includes interactive elements.
  3. Finish with a high-fidelity interactive prototype which includes the graphics and interactive elements which allow navigation through the application.

5. Choosing the Wrong Team

Hiring an improper, inexperienced or unprofessional team can be an MVP’s downfall. What is needed is a team of designers, developers, QA engineers and PMs in order to build an MVP. However, if this team does not have top-of-the-notch skills and proficiency, then the development stage will fail.
When you work with an unprofessional team, you are likely to come across two issues:

Missed deadlines. An MVP needs to be developed in a fast-paced environment. There is a need for constant testing and upgrading. An unprofessional team is likely to miss deadlines and in the end slow down the process or miss opportunities all together.

Feedback analysis. Since timing and analysis are crucial for any MVP, then its success depends on the entire team’s competence. If your team is incompetent, once you receive the first feedback from your users, they can be unable to work on a better version. The best development teams focus on the product so much that they might provide some very valuable feedback and insight. They act as consultants both on the technology and the product.

6. Inappropriate Development Method

Developing an MVP successfully is like cooking. If you intend to marinade and roast chicken and then you change your mind and decide on boiling it, you will spoil it and fail. This is the reason why some MVP developers give up halfway through the project.
There are generally two approaches to building an MVP: agile and waterfall. Agile software development is more efficient in this scenario when compared to the waterfall (traditional method) due to its ability to deliver high-quality results week after week. In addition, the agile approach done properly helps avoid bugs and offers adaptability to changing circumstances.

Although the payment structures might not matter, it is worth noting that most companies that offer agile software development are paid per-hour rate while those that use waterfall are paid per-bid basis. When developing using waterfall one might finish up with a product done according to the specs instead of the product that’s actually needed. Each change done outside of the agreed scope might be paid extra. This can affect the development stage where one is unable to pay on time hence delaying the MVP or affecting the relationship with the developers.

7. Ignoring analytics and user feedback

One of the main purposes of an MVP is to generate feedback in order to make the final product better. Ignoring feedback renders the whole process useless as it deprives it of its purpose.
Why build an MVP only to ignore feedback later?
Feedback is important as it helps you understand the user better, adjust your product to meet the customers’ needs as well as gauge the audience’s perception of your product. Therefore, ignoring the analytics and user feedback is business suicide.

Conclusion

Developing a successful MVP will increase your chances of the product seeing the light of day in the market. In addition, it might turn your idea into a profitable course. However, not all MVPs are successful. Avoiding these seven mistakes will go a long way toward making your MVP successful at its development stage.

See also:

Categories
Blockchain Software

How can blockchain contribute to B2B process improvement?

Blockchain technology shows promise in several key sectors. While it’s far from a cure-all, some key aspects could aid businesses in their process improvement strategies. Cutting waste and inefficiencies from business processes remains a challenge — one that blockchain technology could address. Below are some cost reduction examples blockchain technology could work to improve.

Sectors from real estate to charitable giving have begun to implement blockchain technology to innovate and compete in a fast-changing market. One field which could greatly benefit from blockchain is B2B. Process improvement and cost reduction brought on by the technology could increase profits and boost the industry to new heights.

B2B process improvement strategies

Business-to-business companies often deal with unnecessary complications. The behemoths of the industry such as Alibaba still use antiquated technology to handle their processes. Wide adoption of blockchain technology in the industry could improve processes and reduce costs for enterprises. As global commerce increases, the complexity and number of actors increases.

Businesses can benefit from implementing innovative solutions to increase their competitive advantage. One of many process improvement strategies is to save time and streamline international shipments. Some other cost reduction examples include automation and supply chain improvements.  When a buyer orders a product, the transaction can take weeks to finalize. The usual intermediaries slow the process. Lawyers, red tape, logistics agents, and banks can delay a transaction unnecessarily. 

Many B2B companies still use electronic data interchange technology or EDI (Electronic Data Interchange). According to a 2015 eft survey, B2B business owners and stakeholders believe that EDI is outdated and should be replaced by better technology. Here are a few process improvement strategies blockchain could address.

Eliminate expensive third parties

Smart contracts enable sellers and buyers to scrap expensive third parties and automate business processes. Blockchain smart contracts are transparent features that automatically bind all the parties involved. The smart contract is a set of cryptographic codes which only verified participants can access.

Once the data the participants give correlates with the existing data, it automatically executes. This is one of the biggest cost reduction examples as I’ll mention below. No one can alter the data once it’s on the chain. This makes it immutable, and since blockchain is a distributed ledger, the smart contract has no single point of failure. Even if one node goes down, the system can still operate. 90 percent of B2B stakeholders have realized the benefits of smart contracts and there’s no going back.

Automate data processing

Blockchain processes data in real-time, making it one of the best process improvement strategies for B2B companies. For instance, sellers will be able to access data on their e-commerce portal and see as the numbers add up. This will help sellers make decisions based on the information instead of waiting for weeks before calculating the data before making decisions. Blockchain will reduce the time lag, therefore, sellers will be able to carry out other tasks without delay.

Improve supply chain

Aside from the other process improvement strategies, smart contracts will provide for B2B companies another important benefit of blockchain is supply chain enhancement. Blockchains are a chain of distributed ledgers that process data autonomously. This means that for B2B, sellers can depend on blockchain technology to handle unstructured data. Where traditional supply chain fails in processing data efficiently, blockchain will thrive without error.

Increase transparency among B2B partners

Blockchains can record and store information in a supply chain. All the parties involved can access the data making it easier to exchange documents between business partners.

One of the drags on the global economy is the fact that companies cannot fully trust one another. Blockchain technology sets up a trustless environment improving relationships between enterprises and potentially growing the global economy. Fewer fraudulent transactions or non-payment will increase profit and serve as one more of the powerful cost reduction examples blockchain technology can offer the B2B firms. Blockchain ensures shared visibility like never before. 

Adjust to a changing market

Antiquated EDI technology doesn’t do well with big data supply chains. Due to changing market realities and consumer habits, B2B companies will have to adjust their processes. About half of B2B buyers are millennials and as such B2B companies expecting the manual process of placing fax orders, and handling paper contracts may be asking for too much from millennials. Current consumers want to place orders via B2B e-commerce portals and have their products delivered to them. Blockchain could replace EDI as the logistics technology of choice.

While blockchain seems like the most suitable technology to replace EDI, some remain skeptical. Many pundits predict that blockchain will augment EDI and not replace it. Blockchain can aid B2B companies in their process improvement strategies.

Cost reduction examples

As I mentioned above, blockchain tech can play a role in process improvement strategies for B2B companies. Eliminating intermediaries, supply chain automation, and an improved supply chain are also good cost reduction examples. But how can blockchain technology actually do this?

Reducing fees

One intermediary is the bank. Once there’s no bank involved, sellers will be able to save the percentage that would have gone to the banks involved in payments. According to Accenture, and McLagan, blockchain will save money for B2B partners by reducing or completely eliminating financial institutions fees for B2B transactions. B2B partners can also save the money that would have gone to lawyers. Cutting intermediaries also makes transactions fast, once the seller makes a payment, the buyer receives it immediately.

Automated supply chain

When data processing on supply chains becomes more accurate and immediate, one should expect that it will reduce expenses for B2B sellers. With greater automation, fewer employees are necessary. Human error can also drive up costs Why? Well, because for every human error in data analysis, the business owner has to correct it or pay for it. For instance, if a buyer places an order of 50 million copies of a product and during the logistics and product delivery there’s an error such that they send more than 50 million copies to the buyer, the seller will eventually pay for it.

But think of a scenario where products are labeled on the seller’s supply chain using blockchain technology, and the physical products must correspond to the labeled products on the supply chain then one can assume that it’ll be almost impossible to make an error.

Blockchain integration

The time has come for B2B companies to scale up and adopt blockchain technology. Many big brands such as Amazon, IBM, Alibaba, are pouring money into blockchain development. As of last year, 57 percent of B2B leaders noted that they need to integrate e-commerce with backend technology that will make B2B business processes seamless. While blockchain technology still appears too complex for B2B sellers, some blockchain experts have developed blockchain-as-a-Service for business owners, so that B2B executives can easily integrate blockchain API into their business.

Why wait when you can develop your B2B company on blockchain? As a startup, developing your B2B brand on blockchain from the beginning may factor into your process improvement strategy. Although there are not many B2B brands that are already using blockchain technology, it will be much worse to be miss out on a competitive advantage as more B2B companies.

Categories
Software Technology

5 Key Steps in Moving your Web App to Mobile Platform

5 Key Steps in Moving your Web App to Mobile Platform

Websites have become a staple for businesses which seek out possibilities to engage with potential customers via an online presence. As millions of sites go online each day, there has been a significant development of the web market. What’s more, this has caused a change in the way marketing has been developing; goods and services are now at customer’s convenience who does not even have to leave the comfort of their home in order to make a purchase.

However, the 2010s have brought about a new wave of online interaction which came in the form of mobile devices. First, the smartphone was introduced as a way of increasing the utility of cellular devices. Second, the tablet influenced the way in which users access content. These devices were innovations that allowed PC-like processing speed and RAM in a much smaller, mobile device.
Needless to say, their popularity has been increasing exponentially, leading to the current situation where a mobile app has become as important as a website. Thus, for anyone looking for ways to transform a website into a mobile-friendly App, here are a few tips and guidelines to follow that will ensure a more efficient process and an impressive result.

1. Progressive Web Apps

In the past, apps and websites have been two fairly distinct domains. Of course, they often serve a similar purpose, but the development and creation were done separately.

Recently, however, web apps have come into play and a kind of merger between the two different formats, allowing owners to benefit from the best of both websites and mobile app features, has been observed. This should be the first step in any online business presence, as it also facilitates construction of a mobile version at a later stage.

As technology progresses and users are constantly on the lookout for more convenient online interfaces, implementing Progressive Web Apps (PWA) is a definite way to stand out from the competition. The main benefits include a faster browsing experience, more efficient site navigation and a user-friendly interface that fares better than traditional websites.

As an added bonus, Progressive Web Apps feature on a user’s home screen, meaning that they do not have to enter a search engine or internet browser to access a site. Moreover, the Progressive Web App also has functional offline capabilities, either through an offline mode or the capturing of cache data.

Overall, many are proud advocates of implementing PWA, as they seem to provide the means for the ultimate marriage between convenience and high-functioning sites. Apps generally suffer from a lack of content, but progressive Web Apps may just be the bridge that connects the two effectively.

2. Remove Any Unnecessary Elements

5 Key Steps in Moving your Web App to Mobile Platform - Remove Any Unnecessary Elements

The mobile device has a much smaller screen. For any website user there is nothing more annoying than having to sift through tons of unnecessary content that barely fits within the boundaries of the screen. If the same format is put into a mobile App, the results are disastrous.

Thus, ensure that all of the unneeded content is filtered out. Perhaps consider redesigning the App so that additional sections are created for such content. Whether it is marketing material, large advertisement banners or the promotion of a new product, try not to bombard users with too much information in too dense a space.
Instead, think about simplifying browsing experience. An exemplary app is easy to use, intuitive and slick in design. Overall, such an approach will increase performance across all devices, especially phones and tablets that are not exactly the latest releases.

3. Make the Font Bigger

Sometimes, it is the simple things that accumulate into one huge competitive advantage. Although often overlooked, creating a bigger font is crucial for a successful transition between a website and an app.

Websites are traditionally visited through personal computers and laptops. This creates a bigger screen in which more information is presented. To allocate space for such information, the website font is usually quite small, as the bigger screen allows for users to scroll through seamlessly.

When it comes to apps, much of that information is discarded, as explained in the previous section. The app resembles something more akin to a skeleton of the website, an easy to use format that encourages user-friendliness and familiarity. Thus, to ensure that the space is properly utilized, the font should be larger and easy to read within the confines of a small mobile phone or tablet.
The alternative leaves users with the impression of an ill-thought-out application that does not really utilize the space it has. Nothing is worse for a brand than a half-baked offering.

4. Test the Page on Applied 3G

5 Key Steps in Moving your Web App to Mobile Platform - Test the Page on Applied 3G

There is nothing more frustrating than an internet-based application that does not run at an appropriate speed. Moreover, as the app will now predominantly run over 3G networks, it is essential that the experience is similar to that of Wi-Fi.
Research shows that more people are using their cellular data as a method of connecting to the internet. As such, the App should be able to run compatibility over cellular data services – whether 3G or 4G network connections.

A simple test before launch should help find out whether the development has been successful and where the necessary holes in the operation lie. It may seem like a ‘no-brainer’, but this simple test can save a fortune in negative publicity and bad ratings. It’s better to be safe than sorry.

5. Use media-queries

If you don’t know much about media-queries – use the Bootstrap grid with “col-sm” classes. By attaching Bootstrap or any other CSS framework you can use its responsive out-of-the-box breakpoints without knowing what the media queries are. By using class “col-sm” you automatically set the breakpoint to 768px, which means your app will look much better on small devices such as tablets and smartphones. The change will kick in automatically and so it will autoscale to the device you are currently using.

Summing up

The mobile Application market is on the increase and certain empires have been built just on the back of a successful app that operates efficiently. Moreover, as the smartphone market develops, a well-thought-through mobile application may become the new face of a commercial online experience. Progressive Web Apps, in particular, are greeted with great excitement by organizations and developers as they provide a new way for companies to position themselves within everyday operation of a personal computer. Not only are they a means of increased browsing enjoyment and efficiency, but they now have a desktop presence, which means taking user interaction to a whole new level. The possibilities are endless and there may yet be more innovations that follow.

See also:

 
[contact-form-7 id=”13387″ title=”Contact download_8_reasons”]