In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

How to Write a Clean and Scalable Angular 2 Application: Best Practices for Angular 2

How to Write a Clean and Scalable Angular 2 Application: Best Practices for Angular 2

by Adrian Ababei on Jun 27 2016

Angular 2 is becoming more popular worldwide and because of that, people are starting to learn how to use it. It doesn’t matter if you’re a beginner or an advanced coder, there are some practices you should follow when using Angular 2.

CLI/Boilerplate

If you’re just starting with Angular 2, use angular-cli (npm i angular-cli -g). It’s based on ember-cli. You can generate a good example with ng init project-name. This command will initialize a new Angular 2 application. This application should already be following all the best practices from the official Angular 2 style guide. Besides that, it installs the required npm dependencies. It also creates unit testing and e2e testing scripts. Long story short, it does everything that is required to start a new Angular 2 application. If you don’t like the directory structure or system.js you can use the best starter kit angular2-webpack-starter or other boilerplates.

Build the app

Angular2 uses Rollup to build bundle there is next-generation ES6 module bundler. A good example is browserify or webpack, because there are more loaders and plugins available for support Rollup feature set eg: rollup-loader and rollupify. Rollup can make smaller code however webpack and browserify have rollup-loader or browserify rollupify transformer which you can use to shrink your bundle. In the near future, it is going to be recommended to use @angular/compiler(-cli) and @angular/platform-browser which was made with template compiler, precompiled templates, and styles. Follow this example to speed up your bundle by more than nine times!

Server side (universal) rendering

Universal means rendering pages on both the server and client side. It usually implies the use of frontend JavaScript and Node.js because they allow for the re-usage of libraries, allowing browser JavaScript code to be run in the Node.js environment with very little modification. As a result of this interchangeability. If you want to use Typescript in Nodejs, we don’t suggest using ts-node or any node module which hacks the require.extension. Use “browserify  – node” or webpack with the right configuration to generate server side build.

IDE/Editor

We use Sublime and official Microsoft plugin but we think atom and vscode (unofficial editor of Angular 2) is also ideal for development, but much slower than Sublime. If you prefer complex IDE then use webstorm which has Angular 2 Support.

Linting

We suggest using tslint, it’s the best when using typescript with codelyzer and ng2lint. Valor-software has a very useful lint project, tslint-config-valor contains all rules explicitly.

Documentation

We use typedoc for generating the documentation, there’s a great little tool that allows us to generate HTML documentation based in our TypeScript files similar to what JavaDoc does. This will compile all the documentation (classes, namespaces, functions, etc.), it will be put under the doc folder in the current directory where that command is ran.

Testing

Karma has an over complicated architecture. We suggest using only jasmine (mocha isn’t working yet). Never run tests on ts files, first you need to compile. Unfortunately ts-node is really slow, even with the newest versions. Our tests run with ts-node 10s long and with compiles js only 1s.

TypeScript vs ES6

We use typescript in an Angular 2 based application, and we usually use rxjs too (it is also written by typescript). When you write code, which most often depends on node modules: express, node libs and middlewares use ES6, a lot of packages don’t have typing definition (d.ts). Typescript compiler (tsc) compile the fastest code, but sometimes not the standard way.

Naming Conventions

Naming standards help developers to understand each other’s code better and keep everything tidy. There are naming conventions for file and folder names as well as for class names and selectors. Some examples: – File and folder names should use dash-case and have a suffix which refers to their functionality, like: *.component.ts, *.service.ts *.interface.ts – Selectors should also use dash-case and have a prefix, which functions as a namespace. – Classes (components, services, directives, etc.) and interfaces should use camelCase and have a suffix which refers to the type of the class, like: *Component, *Service, etc.

Directory and File Structure

Directory and file structures are really difficult to keep standardized. The demands always change project by project. In the official style guide you use shared folder (for common components, styles etc.).

Redux

Someday your application will grow up so you have to make a good architecture not only for a big set of components and services. You must handle the states and actions. I think redux is the best container for your app, because all frontend developers know it.

Performance

It is important to know that if you have a component that only expects immutable data to be passed in via a property, you can further optimize rendering speed by adding changeDetection: ChangeDetectionStrategy.OnPush to the component.

Reactivity

Rxjs is a great library and it is much better to depend on library, than a framework. Frameworks change very often, but libraries have a more stable API. Use @ngrx extension like @ngrx/store and@ngrx/router to make a better use of reactivity.

Router

Don’t use the deprecated router (@angular/router-deprecated), Angular 2 is in release candidate status but also has a deprecated router too. We suggest the use of the new router (@angular/router) or @ngrx/router reactive solution, which is the greatest yet. Angular 2 is in release candidate status, but this practice will be useful in the future.

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

These Magento Extensions Will Boost Your Sales - Part One
  As one of the most popular eCommerce platforms, Magento empowers retailers to build engaging, shoppable customer experiences in the digital world. By leveraging next-generation technology and a massive extension library, Magento helps B2B and B2C organizations create highly personalized shopping experiences for their customers.  Since the level of customization is so high for Magento users, they can often find it hard to choose from so many options and decide which plugins and extensions are truly efficient for their business needs. That's why we've created this article, to shed a light on some of the most useful and reliable Magento extensions that can help you make the most out of your Magento eCommerce website.    Magento plugins for marketing    Facebook Pixel for Remarketing This Magento extension collects data from your customers that browse your products and then runs your ads to those users when they enter the social media platform. You want to keep your product in front of your customer's eyes and here's where retargeting and remarketing play a crucial role.  Benefits: Automatic. Collecting user details is done automatically by Facebook Pixel—no installation is required on your end.  Easy exporting. Facebook Pixel lets you easily export products you want to promote on Facebook. Event tracking. You can personalize the way your customers interact with your brand and content by tracking events in your store and sending that information to Facebook.    Omnisend If you're searching for an all-in-one omnichannel marketing automation tool, then this suite is the right choice for you. Keep in mind that this is not a typical email marketing tool. Omnisend allows integrating multiple channels (email, SMS, web push notifications) in the same automation workflow. This extension can be integrated via an open-source plugin developed by a 3rd party.  Benefits:  Robust automation. In the era of digital workspaces, being able to bring all your channels together and integrate several channels in the same automation workflow is a must.  Easy message building. The visual email composer offered by this extension allows users to use a template or build their content from scratch in minutes. Streamlined targeting. By using segmentation based on profile data, shopping behavior, and customer engagement, targeting is much easier to manage.  Contact capture. With the help of landing pages, embeddable forms, and dynamic pop-ups, you can capture contacts more easily.    Mconnect Customer Specific Product & Price Personalization is a big deal in today's digital world so this extension should be part of your arsenal. How does it work? Let's say you want to personalize a particular segment of customers to receive a specific sale. With this extension, you can update it so only particular customers see your sale prices. The same way goes for on-site product listing so you can show customers only the products they are interested in.   Benefits: Persoalization, personalization, personalization. If you want to thrive in today's competitive digital landscape, your site content and your omnichannel campaigns must respond to your customers' needs. Customization. With Mconnect Customer Specific Product & Price, your customization capabilities are endless and will allow your store to respond to customers with products, prices, and relevant content.  Priority for prices. You have the power to decide which price gets priority for a particular segment.   Magento extensions for user experience   Yotpo Reviews According to a recent study, 91% of 18-34-year-old consumers trust online reviews as much as personal recommendations. Customer product reviews are an invaluable resource for developing customer trust. Yotpo's Magento extension supports you in collecting and publishing reviews on your website from customers that have made a purchase from your store.  Benefits: Social media integration. You can easily share your reviews on social media. Product images. Any customer can upload images with the items they've purchased for more credibility. SEO boost. Use snippets, Google Seller Ratings, and Product Listing Ads to boost your reviews index.   LoyaltyLion Any successful eCommerce marketer knows that a loyalty program is essential to transforming customers into a community. This Magento extension improves the customer experience by allowing you to provide referral codes and rewards to your customers thus encouraging them to share your services with friends and family. Benefits: Loyalty points. With this extension, your loyal customers have the opportunity to earn activity points which they can use later to claim special rewards. 100% customization. You can personalize your shopping program so that it fits your business and customers. Loyalty tiers. Your most loyal users will earn the best rewards which will motivate your shoppers to interact with your brand on a constant basis.   These are the most powerful Magento extensions for eCommerce websites that target marketing and user experience. We'll be back with part two of this article to discuss more details about Magento extensions for payments, shipping, analytics, and security. If you want to expand your Magento web development capabilities and empower your website to build robust digital experiences, check out Optasy's leading services in developing thriving web experiences.   Photo credit: geralt on Pixabay. ... Read more
Raluca Olariu / Apr 16'2021
7 Tips from Experts on Magento Web Development
  Magento is a versatile content management system (CMS) that offers outstanding mobile-friendly configuration and easy third-party integrations. As one of the most popular platforms for medium and big eCommerce businesses, Magento provides excellent flexibility and a wide range of integration and features that take customization to the next level.  However, working with Magento might come with some challenges like: Slow loading times Data security issues Poor Google search visibility Extension conflicts   While dealing with these issues is not uncommon in today's dynamic digital environment, there are ways to avoid regularly facing these challenges by implementing solid web development strategies and following specific steps. This article will give you key insights to better understand the process of building and managing Magento websites. It will also include expert tips and tricks from leading professionals in the web development industry.  If you are looking to fully exploit Magento development and get the most out of your web development plan, here are some tips and tricks that might help you.   1. Select your hosting provider carefully and make sure they provide reliable hosting services. When running an eCommerce website, connectivity issues are the last thing you want. The hosting server your website runs to can make a difference in your website's responsiveness and functionality.    2. Provide customized alerts that apply to the specific needs of your customers. By doing this, you'll not only ensure that your users are kept informed, but you'll also make them feel more connected to your brand. Basic alerts include alerts about price changes, and you can take it a step further by notifying customers when desired items are in stock.  Again, you'll kill two birds with one stone by following this practice, as it will contribute to your digital marketing efforts as well.    3. Add responsive parts and create a customized site that allows your audience to become more intimate with your brand. At this stage, you want to establish your brand and craft cohesive design schemes for all the elements that form your eCommerce website. Creating a responsive design element for mobile will allow you to build stronger customer relationships and satisfy your users' demand for accessibility.  As mobile devices are becoming the primary tool that connects your audience with your brand and content, you want to make sure that this connection is streamlined and effective.   4. Focus on selecting the best functions and features to suit the specific needs of your business. To set your website apart from your competition, you must choose Magento's features and plugins wisely. Spend some resources on finding out which functionalities speak to your customers specifically and add the most significant value to your website.  Your choice of Magento features should always reflect your business objectives and match your brand strategy, not the other way around.    5. Use tier pricing and group pricing to set your eCommerce business to success. How? Reward your regular customers and those who buy more inventory in bulk with incentives to stimulate and keep them coming back for more. Magento's tier pricing feature is a reliable tool that can help you manage this financial aspect by allowing you to price items differently and offer incentives.  The feature doesn't require any edits, and it will show your customers exactly how much they save when shopping at your store.    6. "Make SEO a priority" should be the motto of eCommerce businesses. When optimizing your Magento website for SEO, you should focus on boosting your product pages.  Firstly, ensure that your content is straightforward, concise, offers the exact amount of data needed to inform customers, but do not exaggerate at this point. Secondly, you should pay attention to updating the URL key to create a search engine-friendly link to your products.  Lastly, fill in your metadata section of each product in detail and include a minimum of five relevant keywords in each description. This should make your website more visible on search engines and allow people to find your online store more easily.    7. Don't forget about images, as eye-catching photos are often the first item on a website that catches the visitor's attention. Also, ensure that you use relevant names for your images, describing them as accurately as possible. SEO-optimized photos attract more visitors and help your website rank higher on search engines.    Magento is a winning choice for eCommerce   Magento web development may be tricky sometimes, but it's worth investing your resource in building and managing your eCommerce website with this reliable CMS.  Magento provides a wide variety of features that meet specific business needs, and the platform is developed for secure and functional web development.  When it comes to SEO, Magento won't disappoint you. On the contrary, the platform is an excellent choice for beginners as well, offering advanced SEO features that maximize your chances of ranking high on search engines and attracting more potential customers.  See how Optasy can support your business by creating and optimizing your Magento project to match your objectives and your customers' needs.  Photo credit: Megan_Rexazin on Pixabay.       ... Read more
Raluca Olariu / Apr 14'2021
5 Steps to Migrate Your Drupal Website to Another Host
  At some point in their business journey, every website owner can encounter the need to migrate their web host. As more lucrative hosting options are making their way in the industry–VPS, shared, or dedicated hosting—it's no surprise that many website managers choose to perform host migration.  This article provides support in handling one of the most popular DevOps services, hosting server migration, by outlining five essential steps that help you complete a successful migration.   When is the time to move your Drupal website to a new hosting server? The decision to switch web hosts is not an easy one to take. The good news is that there are multiple signs that can make it clear that your website requires hosting updates if you know where to look. It won't be comfortable to acknowledge them, but as soon as you start on this journey, you are transforming your website for the better.  Let's have a look at how you can spot these signs on your Drupal website.  Downtime has become a recurrent issue.  Your customers demand availability and speed, so every time your website is down and unavailable for users, you risk building a bad reputation of unreliable and low-quality services. Your server can impact your site's availability if your hosting equipment’s quality is low or your host's security features and plugins provide poor protection capabilities, as cyber-attacks can often lead to downtime.  Your host is hard to reach. As a website owner, you want to ensure that the communication with your web host is fast and streamlined. There may be times when your server crashes or you a server error, and you need to get in touch with your host as soon as possible to provide troubleshooting guidance and get your site up and running.  An unreliable host may not only affect the functionality of your website but can also cost you customers. Getting the support you need when it comes to your hosting account is paramount to provide high-quality user experiences. That's why making sure that you have a solid customer service team at your side at any time is good for the business. Your current host costs you too much. Web hosting can sometimes be the most significant investment when running a website. It's a recurring expense, so you want to ensure that you choose the best option. However, expensive web hosts aren't always necessary. You have to figure out if the features and the amount of server space that your host provides are a good fit for your site. You don't need to break the bank for hosting servers that don't serve your current needs. You can always review your needs and upgrade to a more expensive plan. You don't get the security you need. As far as investments are concerned, paying extra for a secure web host is worth it. A host that takes security seriously will bring significant benefits to your website.  By investing in a secure hosting server, you'll avoid losing data and parts of your website, having user data compromised, and losing credibility in front of your audience.  When choosing your web host, watch out for features and plugins like Secure Sockets Layer certificates, malware scanning, or server firewalls.    How to switch to a new hosting provider Migrating your Drupal site to a new host is a process that involves contacting your current host, performing database backups, connecting to a new server, and uploading your files. It's not uncommon for issues like corrupted backups to appear during the migration process. Consider this when planning your migration, and think if you can save some resources by hiring a professional agency like Optasy to complete this process for you.  There are a few essential steps to follow when migrating to another web hosting server. Let's explore some of them.   1. Turn Drupal caching off. This is the first step to take in order to avoid potential disruptions. Go to your Drupal admin dashboard and: Click Configuration - Performance - Caching - Select "No Caching.” Uncheck "Aggregate CSS files" and "Aggregate JavaScript files" in "bandwidth optimization" and click "Clear all caches.”   2. Backup your Drupal files. Connect to your remote server - Enter the connection details - Hit "QuickConnect" and connect to the remote server that hosts your website.  In your main site's folder, download the content on your local device, and you've done backing up your Drupal files.   3. Export your Drupal database. Go to the phpMyAdmin on your server's control panel in the Database section.  Click "Check all" on your Drupal site database, then "Export method and the SQL.”   4. Migrate your Drupal database to the new host. Create a new MySQL database on your target server. Click "Import" at the top of your database, then "Choose File,” and press "Go.” You've now restored your site on the new hosting from the backup.   5. Turn on Drupal caching. Go to Configuration - Performance - Enable Drupal caching. Kudos to you! You've officially migrated your Drupal site to another host.    Conclusion Building and managing a Drupal website is a complex process, and hosting is one element that can be pretty challenging to handle. There are plenty of hosting options available on the market, and you might find it difficult to decide which one is the best fit for your website needs.  If you're considering server migration or just need some professional advice on how to handle your hosting server successfully, our team of Drupal experts at Optasy is glad to help.    Photo credit: bsdrouin on Pixabay.     ... Read more
Raluca Olariu / Apr 12'2021