Web development https://tigosoftware.com/index.php/ en The Difference Between Visual Sitemaps and XML Sitemaps and Why You Need Them https://tigosoftware.com/index.php/difference-between-visual-sitemaps-and-xml-sitemaps-and-why-you-need-them <span class="field field--name-title field--type-string field--label-hidden">The Difference Between Visual Sitemaps and XML Sitemaps and Why You Need Them</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/index.php/user/1" lang="" about="/index.php/user/1" typeof="schema:Person" property="schema:name" datatype="" class="username">admin</a></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 11/10/2020 - 22:48</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>If you’re like many business owners, you’re busy.  At best, you find time to delve into the parts of your business that you love. At worst, you’re buried in administrative tasks. Either way, you don’t spend time considering the little digital emissaries crawling all over your website, deciding whether or not to point people in your direction.</p> <p><img src="https://i.imgur.com/8isgSbz.png" /></p> <p>Even if you’re a whiz at creating content and communicating about your business online, blog posts, web pages, and contact forms floating adrift in a sea of code won’t attract many passing ships.</p> <h2>That’s where sitemaps come in!</h2> <p>A sitemap can be your anchor…or better yet a lighthouse with a far-reaching beacon guiding all those who search the internet to their final destination — your website!</p> <p><img src="https://i.imgur.com/RnWpQIN.png" /></p> <h2>What’s a sitemap?</h2> <p>Fun fact: “Sitemap” has three (or possibly more than three) definitions, and not everyone will be forthright about which type of sitemap they’re discussing.</p> <p><img alt="The Difference Between Visual Sitemaps and XML Sitemaps -- example of Visual Sitemap made in MS Word" height="679" src="https://mayecreate.com/wp-content/uploads/2019/09/how-to-make-a-sitemap-example.jpg" width="594" /></p> <h3>Definition 1: A Hand-Drawn Map or Flowchart of Your Website</h3> <p>One type of sitemap can be compared to a hand-drawn map.  It’s a visual representation of your site that you make in a program like MS Word, PowerPoint, Google Sheets, Google Docs, etc.  It’s a flowchart of your site that shows how the pages are linked together and is often used for planning and design.</p> <h4>Why would you want a sitemap like this?</h4> <p>Keeping your content organized when planning a new website can feel confusing.  A sitemap flowchart keeps information organized and presented in a way that’s easy to understand.   We use this style of sitemap to show clients how the navigation on their site will be nested. Our designers use it to determine how to organize the pages in the site and plan the navigation design.</p> <p>Definition 2: A GPS System for Google or XML Map of Your Website</p> <p><img alt="The Difference Between Visual Sitemaps and XML Sitemaps -- example of an XML Sitemap" height="507" src="https://mayecreate.com/wp-content/uploads/2019/09/how-to-make-a-sitemap-spreadsheet.jpg" width="653" /></p> <p>The second, more techy type of sitemap is an XML sitemap.  Think of this sitemap as a digital GPS system — like an app on your phone or whatever is installed in your fancy car.  This map is generated using data from your site, and it’s an accurate representation of the pages of your site and how they are linked together.</p> <p><img src="https://i.imgur.com/ceHJbO2.png" /></p> <h4>Why have a sitemap like this?</h4> <p>According to Google, “A <em>sitemap</em> is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to more intelligently crawl your site.”</p> <p>Maintaining a well-mapped site means the Google crawlers can easily see what kind of information you offer and send search engine users to your web pages. </p> <h5><strong>Bottom line: having a sitemap helps people find your website — which means they can find you and your services.</strong></h5> <p>Definition 3: A Map of Pages to Help Visitors Navigate Your Site</p> <p>In the past he was very common to see a sitemap link on websites.   The sitemap page displays all the pages of website and provide links to each individual page.   You sometimes see a link to these sitemaps in the website footer.  </p> <h4>Do you need a sitemap like this?</h4> <p>Websites with well-designed navigation don’t need a page with a full sitemap.  As website navigation has evolved and become easier to use, web site users have become more familiar with it and it’s easier to find things.  If you feel like you need to have one of these sitemaps, you might consider redesigning your navigation, adding breadcrumbs, or a search and filter function to your site.</p> <h2>You’re a sitemap-savvy business owner!</h2> <p>Okay — now you know what people are talking about when sitemaps come up in conversation.  Heck, you could even start a sitemap conversation at your next business networking event.  And all the while, online prospects will be waltzing toward your site and learning about your services, because you implement smart sitemapping strategies!</p> <h2>How does a sitemap help my site?</h2> <p>The visual sitemap we mentioned earlier is used for outlining and planning your site with a designer.  You can even include your “hand-drawn map” as a page on your site, if you think it would be helpful to your audience.  Think of that visual sitemap is a set of plans for a deluxe online storefront. Then think of the XML sitemap is the smoothly paved road that helps people arrive at your glorious website.</p> <p>Source: mayecreate</p> </div> <div class="field field--name-field-blog-category field--type-entity-reference field--label-inline clearfix"> <div class="field__label">Category</div> <div class="field__item"><a href="/index.php/category/front-end-back-end-development" hreflang="en">Full Life Cycle Software Development</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/index.php/taxonomy/term/68" hreflang="en">Web development</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> </section> Tue, 10 Nov 2020 15:48:05 +0000 admin 295 at https://tigosoftware.com https://tigosoftware.com/index.php/difference-between-visual-sitemaps-and-xml-sitemaps-and-why-you-need-them#comments Web Architecture 101 https://tigosoftware.com/index.php/web-architecture-101 <span class="field field--name-title field--type-string field--label-hidden">Web Architecture 101</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/index.php/user/1" lang="" about="/index.php/user/1" typeof="schema:Person" property="schema:name" datatype="" class="username">admin</a></span> <span class="field field--name-created field--type-created field--label-hidden">Fri, 11/06/2020 - 21:31</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p><img alt="Image for post" height="421" src="https://miro.medium.com/max/665/1*K6M-x-6e39jMq_c-2xqZIQ.png" width="665" /></p> <p>Modern web application architecture overview</p> <p>The above diagram is a fairly good representation of our architecture at Storyblocks. If you’re not an experienced web developer, you’ll likely find it complicated. The walk through below should make it more approachable before we dive into the details of each component.</p> <blockquote> <p>A user searches on Google for “Strong Beautiful Fog And Sunbeams In The Forest”. The <a href="https://www.graphicstock.com/stock-image/strong-beautiful-fog-and-sunbeams-in-the-forest-246703">first result</a> happens to be from Storyblocks, our leading stock photo and vectors site. The user clicks the result which redirects their browser to the image details page. Underneath the hood the user’s browser sends a request to a DNS server to lookup how to contact Storyblocks, and then sends the request.</p> <p>The request hits our load balancer, which randomly chooses one of the 10 or so web servers we have running the site at the time to process the request. The web server looks up some information about the image from our caching service and fetches the remaining data about it from the database. We notice that the color profile for the image has not been computed yet, so we send a “color profile” job to our job queue, which our job servers will process asynchronously, updating the database appropriately with the results.</p> <p>Next, we attempt to find similar photos by sending a request to our full text search service using the title of the photo as input. The user happens to be a logged into Storyblocks as a member so we look up his account information from our account service. Finally, we fire off a page view event to our data firehose to be recorded on our cloud storage system and eventually loaded into our data warehouse, which analysts use to help answer questions about the business.</p> <p>The server now renders the view as HTML and sends it back to the user’s browser, passing first through the load balancer. The page contains Javascript and CSS assets that we load into our cloud storage system, which is connected to our CDN, so the user’s browser contacts the CDN to retrieve the content. Lastly, the browser visibly renders the page for the user to see.</p> </blockquote> <p><img src="https://i.imgur.com/gNF4ifT.png" /></p> <p>Next I’ll walk you through each component, providing a “101” introduction to each that should give you a good mental model for thinking through web architecture going forward. I’ll follow up with another series of articles providing specific implementation recommendations based on what I’ve learned in my time at Storyblocks.</p> <p>1. DNS</p> <p>DNS stands for “Domain Name System” and it’s a backbone technology that makes the world wide web possible. At the most basic level DNS provides a key/value lookup from a domain name (e.g., google.com) to an IP address (e.g., 85.129.83.120), which is required in order for your computer to route a request to the appropriate server. Analogizing to phone numbers, the difference between a domain name and IP address is the difference between “call John Doe” and “call 201-867–5309.” Just like you needed a phone book to look up John’s number in the old days, you need DNS to look up the IP address for a domain. So you can think of DNS as the phone book for the internet.</p> <p>There’s a lot more detail we could go into here but we’ll skip over it because it’s not critical for our 101-level intro.</p> <p>2. Load Balancer</p> <p>Before diving into details on load balancing, we need to take a step back to discuss horizontal vs. vertical application scaling. What are they and what’s the difference? Very simply put in <a href="https://stackoverflow.com/questions/11707879/difference-between-scaling-horizontally-and-vertically-for-databases">this StackOverflow post</a>, horizontal scaling means that you scale by adding more machines into your pool of resources whereas “vertical” scaling means that you scale by adding more power (e.g., CPU, RAM) to an existing machine.</p> <p>In web development, you (almost) always want to scale horizontally because, to keep it simple, stuff breaks. Servers crash randomly. Networks degrade. Entire data centers occasionally go offline. Having more than one server allows you to plan for outages so that your application continues running. In other words, your app is “fault tolerant.” Secondly, horizontal scaling allows you to minimally couple different parts of your application backend (web server, database, service X, etc.) by having each of them run on different servers. Lastly, you may reach a scale where it’s not possible to vertically scale any more. There is no computer in the world big enough to do all your app’s computations. Think Google’s search platform as a quintessential example though this applies to companies at much smaller scales. Storyblocks, for example, runs 150 to 400 AWS EC2 instances at any given point in time. It would be challenging to provide that entire compute power via vertical scaling.</p> <p>Ok, back to load balancers. They’re the magic sauce that makes scaling horizontally possible. They route incoming requests to one of many application servers that are typically clones / mirror images of each other and send the response from the app server back to the client. Any one of them should process the request the same way so it’s just a matter of distributing the requests across the set of servers so none of them are overloaded.</p> <p><img src="https://i.imgur.com/zotfVLf.png" /></p> <p>That’s it. Conceptually load balancers are fairly straight forward. Under the hood there are certainly complications but no need to dive in for our 101 version.</p> <p>3. Web Application Servers</p> <p>At a high level web application servers are relatively simple to describe. They execute the core business logic that handles a user’s request and sends back HTML to the user’s browser. To do their job, they typically communicate with a variety of backend infrastructure such as databases, caching layers, job queues, search services, other microservices, data/logging queues, and more. As mentioned above, you typically have at least two and often times many more, plugged into a load balancer in order to process user requests.</p> <p>You should know that app server implementations require choosing a specific language (Node.js, Ruby, PHP, Scala, Java, C# .NET, etc.) and a web MVC framework for that language (Express for Node.js, Ruby on Rails, Play for Scala, Laravel for PHP, etc.). However, diving into the details of these languages and frameworks is beyond the scope of this article.</p> <p>4. Database Servers</p> <p>Every modern web application leverages one or more databases to store information. Databases provide ways of defining your data structures, inserting new data, finding existing data, updating or deleting existing data, performing computations across the data, and more. In most cases the web app servers talk directly to one, as will the job servers. Additionally, each backend service may have it’s own database that’s isolated from the rest of the application.</p> <p>While I’m avoiding a deep dive on particular technologies for each architecture component, I’d be doing you a disservice not to mention the next level of detail for databases: SQL and NoSQL.</p> <p>SQL stands for “Structured Query Language” and was invented in the 1970s to provide a standard way of querying relational data sets that was accessible to a wide audience. SQL databases store data in tables that are linked together via common IDs, typically integers. Let’s walk through a simple example of storing historical address information for users. You might have two tables, users and user_addresses, linked together by the user’s id. See the image below for a simplistic version. The tables are linked because the user_id column in user_addresses is a “foreign key” to the id column in the users table.</p> <p><img alt="Image for post" height="171" src="https://miro.medium.com/max/60/1*Ln39QPggpJVMAScUBsrcCQ.png?q=20" width="451" /></p> <p><img alt="Image for post" height="171" src="https://miro.medium.com/max/451/1*Ln39QPggpJVMAScUBsrcCQ.png" width="451" /></p> <p>If you don’t know much about SQL, I highly recommend walking through a tutorial like you can find on Khan Academy <a href="https://www.khanacademy.org/computing/computer-programming/sql">here</a>. It’s ubiquitous in web development so you’ll at least want to know the basics in order to properly architect an application.</p> <p>NoSQL, which stands for “Non-SQL”, is a newer set of database technologies that has emerged to handle the massive amounts of data that can be produced by large scale web applications (most variants of SQL don’t scale horizontally very well and can only scale vertically to a certain point). If you don’t know anything about NoSQL, I recommend starting with some high level introductions like these:</p> <ul><li><a href="https://www.w3resource.com/mongodb/nosql.php">https://www.w3resource.com/mongodb/nosql.php</a></li> <li><a href="http://www.kdnuggets.com/2016/07/seven-steps-understanding-nosql-databases.html">http://www.kdnuggets.com/2016/07/seven-steps-understanding-nosql-databases.html</a></li> <li><a href="https://resources.mongodb.com/getting-started-with-mongodb/back-to-basics-1-introduction-to-nosql">https://resources.mongodb.com/getting-started-with-mongodb/back-to-basics-1-introduction-to-nosql</a></li> </ul><p>I would also keep in mind that, by and large, <a href="https://blog.timescale.com/why-sql-beating-nosql-what-this-means-for-future-of-data-time-series-database-348b777b847a">the industry is aligning on SQL as an interface even for NoSQL databases</a> so you really should learn SQL if you don’t know it. There’s almost no way to avoid it these days.</p> <p>5. Caching Service</p> <p>A caching service provides a simple key/value data store that makes it possible to save and lookup information in close to O(1) time. Applications typically leverage caching services to save the results of expensive computations so that it’s possible to retrieve the results from the cache instead of recomputing them the next time they’re needed. An application might cache results from a database query, calls to external services, HTML for a given URL, and many more. Here are some examples from real world applications:</p> <ul><li>Google caches search results for common search queries like “dog” or “Taylor Swift” rather than re-computing them each time</li> <li>Facebook caches much of the data you see when you log in, such as post data, friends, etc. Read a detailed article on Facebook’s caching tech <a href="https://medium.com/@shagun/scaling-memcache-at-facebook-1ba77d71c082">here</a>.</li> <li>Storyblocks caches the HTML output from server-side React rendering, search results, typeahead results, and more.</li> </ul><p>The two most widespread caching server technologies are Redis and Memcache. I’ll go into more detail here in another post.</p> <p>6. Job Queue &amp; Servers</p> <p>Most web applications need to do some work asynchronously behind the scenes that’s not directly associated with responding to a user’s request. For instance, Google needs to crawl and index the entire internet in order to return search results. It does not do this every time you search. Instead, it crawls the web asynchronously, updating the search indexes along the way.</p> <p>While there are different architectures that enable asynchronous work to be done, the most ubiquitous is what I’ll call the “job queue” architecture. It consists of two components: a queue of “jobs” that need to be run and one or more job servers (often called “workers”) that run the jobs in the queue.</p> <p>Job queues store a list of jobs that need to be run asynchronously. The simplest are first-in-first-out (FIFO) queues though most applications end up needing some sort of priority queuing system. Whenever the app needs a job to be run, either on some sort of regular schedule or as determined by user actions, it simply adds the appropriate job to the queue.</p> <p>Storyblocks, for instance, leverages a job queue to power a lot of the behind-the-scenes work required to support our marketplaces. We run jobs to encode videos and photos, process CSVs for metadata tagging, aggregate user statistics, send password reset emails, and more. We started with a simple FIFO queue though we upgraded to a priority queue to ensure that time-sensitive operations like sending password reset emails were completed ASAP.</p> <p>Job servers process jobs. They poll the job queue to determine if there’s work to do and if there is, they pop a job off the queue and execute it. The underlying languages and frameworks choices are as numerous as for web servers so I won’t dive into detail in this article.</p> <p>7. Full-text Search Service</p> <p>Many if not most web apps support some sort of search feature where a user provides a text input (often called a “query”) and the app returns the most “relevant” results. The technology powering this functionality is typically referred to as “<a href="https://en.wikipedia.org/wiki/Full-text_search">full-text search</a>”, which leverages an <a href="https://en.wikipedia.org/wiki/Inverted_index">inverted index</a> to quickly look up documents that contain the query keywords.</p> <p><img alt="Image for post" height="189" src="https://miro.medium.com/max/60/1*gun_BpdDH9KrNna1NnaocA.png?q=20" width="561" /></p> <p><img alt="Image for post" height="189" src="https://miro.medium.com/max/561/1*gun_BpdDH9KrNna1NnaocA.png" width="561" /></p> <p>Example showing how three document titles are converted into an inverted index to facilitate fast lookup from a specific keyword to the documents with that keyword in the title. Note, common words such as “in”, “the”, “with”, etc. (called stop words), are typically not included in an inverted index.</p> <p>While it’s possible to do full-text search directly from some databases (e.g., <a href="https://dev.mysql.com/doc/refman/5.7/en/fulltext-search.html">MySQL supports full-text search</a>), it’s typical to run a separate “search service” that computes and stores the inverted index and provides a query interface. The most popular full-text search platform today is <a href="https://www.elastic.co/products/elasticsearch">Elasticsearch</a> though there are other options such as <a href="http://sphinxsearch.com/">Sphinx</a> or <a href="http://lucene.apache.org/solr/features.html">Apache Solr</a>.</p> <p>8. Services</p> <p>Once an app reaches a certain scale, there will likely be certain “services” that are carved out to run as separate applications. They’re not exposed to the external world but the app and other services interact with them. Storyblocks, for example, has several operational and planned services:</p> <ul><li><strong>Account service</strong> stores user data across all our sites, which allows us to easily offer cross-sell opportunities and create a more unified user experience</li> <li><strong>Content service </strong>stores metadata for all of our video, audio, and image content. It also provides interfaces for downloading the content and viewing download history.</li> <li><strong>Payment service </strong>provides an interface for billing customer credit cards.</li> <li><strong>HTML → PDF service</strong> provides a simple interface that accepts HTML and returns a corresponding PDF document.</li> </ul><p>9. Data</p> <p>Today, companies live and die based on how well they harness data. Almost every app these days, once it reaches a certain scale, leverages a data pipeline to ensure that data can be collected, stored, and analyzed. A typical pipeline has three main stages:</p> <ol><li>The app sends data, typically events about user interactions, to the data “firehose” which provides a streaming interface to ingest and process the data. Often times the raw data is transformed or augmented and passed to another firehose. AWS Kinesis and Kafka are the two most common technologies for this purpose.</li> <li>The raw data as well as the final transformed/augmented data are saved to cloud storage. AWS Kinesis provides a setting called “firehose” that makes saving the raw data to it’s cloud storage (S3) extremely easy to configure.</li> <li>The transformed/augmented data is often loaded into a data warehouse for analysis. We use AWS Redshift, as does a large and growing portion of the startup world, though larger companies will often use Oracle or other proprietary warehouse technologies. If the data sets are large enough, a Hadoop-like NoSQL MapReduce technology may be required for analysis.</li> </ol><p>Another step that’s not pictured in the architecture diagram: loading data from the app and services’ operational databases into the data warehouse. For example at Storyblocks we load our VideoBlocks, AudioBlocks, Storyblocks, account service, and contributor portal databases into Redshift every night. This provides our analysts a holistic dataset by co-locating the core business data alongside our user interaction event data.</p> <p>10. Cloud storage</p> <p>“Cloud storage is a simple and scalable way to store, access, and share data over the Internet” <a href="https://aws.amazon.com/what-is-cloud-storage/">according to AWS</a>. You can use it to store and access more or less anything you’d store on a local file system with the benefits of being able to interact with it via a RESTful API over HTTP. Amazon’s S3 offering is by far the most popular cloud storage available today and the one we rely on extensively here at Storyblocks to store our video, photo, and audio assets, our CSS and Javascript, our user event data and much more.</p> <p>11. CDN</p> <p>CDN stands for “Content Delivery Network” and the technology provides a way of serving assets such as static HTML, CSS, Javascript, and images over the web much faster than serving them from a single origin server. It works by distributing the content across many “edge” servers around the world so that users end up downloading assets from the “edge” servers instead of the origin server. For instance in the image below, a user in Spain requests a web page from a site with origin servers in NYC, but the static assets for the page are loaded from a CDN “edge” server in England, preventing many slow cross-Atlantic HTTP requests.</p> <p><img alt="Image for post" height="411" src="https://miro.medium.com/max/60/1*ZkC_5865Hx-Cgph3iPJghw.png?q=20" width="918" /></p> <p><img alt="Image for post" height="411" src="https://miro.medium.com/max/918/1*ZkC_5865Hx-Cgph3iPJghw.png" width="918" /></p> <p><a href="https://www.creative-artworks.eu/why-use-a-content-delivery-network-cdn/">Source</a></p> <p><a href="https://www.creative-artworks.eu/why-use-a-content-delivery-network-cdn/">Check out this article</a> for a more thorough introduction. In general a web app should always use a CDN to serve CSS, Javascript, images, videos and any other assets. Some apps might also be able to leverage a CDN to serve static HTML pages.</p> <p>Parting thoughts</p> <p>And that’s a wrap on Web Architecture 101. I hope you found this useful. I’ll hopefully post a series of 201 articles that provide deep dives into some of these components over the course of the next year or two.</p> <p>Source: engineering.videoblocks.com</p> </div> <div class="field field--name-field-blog-category field--type-entity-reference field--label-inline clearfix"> <div class="field__label">Category</div> <div class="field__item"><a href="/index.php/taxonomy/term/63" hreflang="en">Smart Solutions</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/index.php/taxonomy/term/68" hreflang="en">Web development</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> </section> Fri, 06 Nov 2020 14:31:55 +0000 admin 286 at https://tigosoftware.com https://tigosoftware.com/index.php/web-architecture-101#comments Why chose Angular for your next projects https://tigosoftware.com/index.php/why-chose-angular-your-next-projects <span class="field field--name-title field--type-string field--label-hidden">Why chose Angular for your next projects</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/index.php/user/20" typeof="schema:Person" property="schema:name" datatype="">dangnh27</span></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 09/01/2020 - 06:29</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Angular is an open-source JS-based framework, the first version of which was presented by Google back in 2010. Today, Angular is among the most popular JS frameworks for developing websites, web apps &amp; mobile apps (for iPhone and Android) in the world. Angular development is a process, which implies working on the client-side of this framework in order to create an end software product.</p> <img alt="Why chose Angular for your next projects" data-entity-type="file" data-entity-uuid="77d63333-34f6-4a8a-9f49-7974087ed5a4" src="/sites/default/files/inline-images/chose_angular.jpeg" class="align-center" /><p>Among other JS frameworks, Angular may as well be the best solution for IT professionals, providing a handy basic concept of Model-View-Controller. Due to this, a large team can divide software logic from DOM manipulations without interrupting workflow, by distributing separate tasks between separate development groups.</p> <p>The framework is also great for implementing interactivity mechanisms – with its help, you can easily create dynamic web pages with instantly updated content (no readymade WordPress theme or any other engine theme written in PHP will provide you with such online flexibility).</p> <p>Fast dynamic pages are always good for SEO since users usually appreciate the immediate response time and are more attracted to resources with high performance (with Angular interactive elements, the maximum waiting threshold is less than a second). Software engineers get to create awesome fast one-page apps and sites as well. </p> <p>All in all, you can see why startuppers and entrepreneurs tend to go for Angular development outsourcing services so often. </p> <p>Now, let’s see exactly if the specifics of front end development with Angular should fit your requirements during the implementation of a major project.</p> <ul><li><strong>Angular is a universal solution.</strong> With it, you get to employ numerous tools, templates, directives, and other readymade elements for brushing up your project. With the right approach to programming in Angular, you will never get confused about the relationships between classes, objects, and methods, since everything is distributed across different files;</li> <li><strong>Angular uses a strongly-typed language, which is an advantage for large-scale projects.</strong> Developers dealing with Angular will have to write TypeScript language code (this is one of the JS variations). This is a strongly-typed language that will not allow ambiguities in code constructs.</li> <li><strong>Angular features two-way data binding (as opposed to the same React), which facilitates connections between components and ensures one-to-one correspondence.</strong> Due to this, the debugging process is simplified, because changes at one end of the DOM immediately entail changes at the other end of the DOM.</li> <li><strong>Angular is perfectly compatible with advanced debugging and testing tools.</strong> It interacts well with solutions such as Karma and Jasmine, which are considered among the best tools in the midst of testers.</li> <li><strong>Angular is ideal for creating both mobile and desktop software.</strong> The framework was created to develop cross-platform projects and can be perfectly adapted to work on solutions for mobile gadgets as well.</li> <li><strong>Angular has a huge online community.</strong> In view of the ongoing popularity of this framework, the number of its fans is growing every day. This means that you can find the answer to practically any question related to working in Angular on the Internet.</li> </ul><p style="text-align: right">Source: MPS</p> <p> </p> </div> <div class="field field--name-field-blog-category field--type-entity-reference field--label-inline clearfix"> <div class="field__label">Category</div> <div class="field__item"><a href="/index.php/category/front-end-back-end-development" hreflang="en">Full Life Cycle Software Development</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/index.php/taxonomy/term/68" hreflang="en">Web development</a></li> <li><a href="/index.php/taxonomy/term/65" hreflang="en">Angular</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> </section> Mon, 31 Aug 2020 23:29:02 +0000 dangnh27 149 at https://tigosoftware.com https://tigosoftware.com/index.php/why-chose-angular-your-next-projects#comments Angular: Best Use Cases and Reasons To Opt For This Tool https://tigosoftware.com/index.php/angular-best-use-cases-and-reasons-opt-tool <span class="field field--name-title field--type-string field--label-hidden">Angular: Best Use Cases and Reasons To Opt For This Tool</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/index.php/user/34" typeof="schema:Person" property="schema:name" datatype="">lphamvan</span></span> <span class="field field--name-created field--type-created field--label-hidden">Thu, 08/20/2020 - 16:40</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p><span>Angular (also referred to as Angular 2+) is a web development platform built in TypeScript that provides developers with robust tools for creating the client side of web applications.  </span><br /><span>Released in 2010 and formerly known as AngularJS, Angular is a JavaScript framework that was initially geared toward building single-page applications. At the time, the popularity of SPAs was growing rapidly, and so did the popularity of the AngularJS framework. But over time, the emergence of new tools like React and Vue, which offered wider functionality, made the Angular team think about improving their product.</span></p> <p>In 2016, Google presented a new, fully rewritten version of this tool and put it simply -- Angular. New features included semantic versioning based on the MAJOR.MINOR.PATCH scheme, a command-line interface (CLI), and an entirely component-based architecture. The major drawback was that this version was completely different from the previous and wasn’t backward compatible. Developers had to rewrite all of their code if they wanted to use Angular instead of AngularJS in their projects.</p> <p>The next version, Angular 4, became available in March 2017. This version offered faster compilation, reduction of code size, and better bug fix alerts and was backward compatible with Angular 2. A few months later, the Angular team released the next version of Angular with Build Optimizer, an improved compiler, and a dependency management update. Angular 6, released in May 2018, introduced the Ivy Renderer, new CLI commands, and Angular Elements. The next version of Angular is expected in late fall 2018. The constant improvement of this platform is the main reason why it’s so beloved by frontend developers.</p> <h2>Why Angular?</h2> <p>So, what are the top benefits developers can get from using Angular in their projects? Here we’ll focus on Angular 2+, omitting AngularJS since we don’t use the first version in our projects. The strong sides of Angular include:</p> <ul><li> <p><strong>Detailed documentation.</strong><span> </span>Angular boasts detailed documentation where developers can find all necessary information without asking their colleagues. As a result, developers can quickly come up with technical solutions and resolve emerging issues. </p> </li> <li> <p><strong>Support by Google.</strong><span> </span>A lot of developers consider Google support another benefit of Angular, making the platform trustworthy. At ng-conf 2017, the developers of Angular confirmed that Google will support Angular on a long-term basis.</p> </li> <li> <p><strong>Great</strong><strong><span> </span>ecosystem of third-party components.<span> </span></strong>The popularity of Angular has resulted in the appearance of thousands of additional tools and components that can be used in Angular apps. As a result, you can get additional functionality and productivity improvements.</p> </li> <li> <p><strong>Component-based architecture</strong>. In the second version, Angular shifted from an MVC to a component-based architecture. According to this architecture, an app is divided into independent logical and functional components. These components can easily be replaced and decoupled as well as reused in other parts of an app. In addition, component independence makes it easy to test a web app and ensure that every component works seamlessly.</p> <img alt="Example of component-based architecture. Components of an order app" data-entity-type="file" data-entity-uuid="0d8f2d81-65d5-450d-b2f2-b7fc55930e7d" src="/sites/default/files/inline-images/content_dependency-injections.png" class="align-center" /><p> </p> </li> <li> <p><strong>Ahead-of-time compiler.</strong><span> </span>Angular’s AOT compiler converts TypeScript and HTML into JavaScript during the build process. This means that code is compiled before the browser loads your web app so that it’s rendered much faster. An AOT compiler is also much more secure than a just-in-time (JIT) compiler.</p> </li> <li> <p><strong>CLI</strong>. It is probably the most beloved feature for the majority of Angular developers. It automates the whole development process making app initialization, configuration, and development as easy as possible. The Angular CLI allows you to create a new Angular project, add features to it, and run unit and end-to-end tests with a few simple commands. It not only increases code quality but also greatly facilitates development.</p> </li> <li> <p><strong>Angular Elements</strong>. Starting with Angular 6, developers can easily add custom elements to any web app built with React, JQuery, Vue, or any other environment.</p> </li> <li> <p><strong>Ivy Renderer</strong>.It's another great feature that became available with Angular 6. Ivy Renderer translates an app’s components and templates into JavaScript code that can be displayed by a browser. The main characteristic of this tool is its tree shaking technique. During rendering, Ivy removes unused code to make it clearer and smaller. As a result, web apps load faster.</p> </li> <li> <p><strong>Angular Material</strong>. This collection of Material Design elements optimized for Angular lets developers easily integrate UI components.</p> </li> <li> <p><strong>Dependency injection</strong>. is quite an arguable advantage of Angular. In plain English, dependency injection refers to one object supplying the dependencies of another object. These dependencies define how various components are connected and show how changes in one part of the code affects other parts. On the one hand, using dependency injection makes code more readable and maintainable. It can greatly reduce the time spent testing and hence cut the costs of web development. Starting from version 2, Angular provides developers with a separate tree of dependency injectors that can be changed or replaced without reconfiguring all components. But on the other hand, dependency injection may be time-consuming and it may be hard to create dependencies for components.</p> <img alt="Example of dependency injections. The dotted arrow shows the dependency between Child1 Component and App Module" data-entity-type="file" data-entity-uuid="bfbc6a15-f55b-4cb2-824b-7463246067fc" src="/sites/default/files/inline-images/content_dependency-injections2.png" class="align-center" /><p> </p> </li> <li> <p><strong>Angular Universal.</strong><span> </span>Used for server-side rendering, Angular Universal brings several benefits to your project. First, it facilitates web crawlers to improve your web app’s rank in search engines. Second, it decreases page load time and improves performance on mobile devices. These factors help you increase the number of users on your website.</p> </li> <li> <h2>Angular imperfections</h2> <p>Every tool has both strong and weak sides. To make a wise decision, you should also consider what difficulties you may face while using Angular. Angular has the following imperfections:</p> </li> <li> <p><strong>Hard to learn</strong></p> </li> <li> <p>Most developers claim that Angular is quite complex, which is why it can be difficult for newcomers. And even though the component-based architecture makes code more readable, it’s still difficult to manage and set dependencies between components. TypeScript only adds fuel to the fire since you need additional time to learn it. </p> </li> <li> <p><strong>Poor SEO options</strong></p> </li> <li> <p>Even though the Angular team does their utmost to make Angular SEO-friendly, lots of developers still complain about poor accessibility for search crawlers. This is explained by the fact that single-page applications often change content and meta tags using JavaScript. Some search bots are unable to see these changes and hence see only the basic page template. Besides, deep links on a single-page app are hard to get indexed. Usually, developers need to make additional efforts to SEO optimize web apps built with Angular. Angular Universal and Prerender.io are common solutions. </p> </li> <li> <p><strong>Difficulties with backward compatibility</strong></p> </li> <li> <p>Developers can’t switch directly from AngularJS to Angular. There’s an entire section in the Angular documentation that enumerates all possible ways to deal with migration. <br /> But it’s fair to say that older versions of Angular are perfectly backward compatible. For example, you’ll have no difficulty migrating from the fifth to the fourth version.</p> <h2>What projects can benefit from Angular?</h2> <p><strong>1. Enterprise web apps</strong><br /> TypeScript has all the features needed to develop large-scale projects, as the Angular team claims. TypeScript is equipped with autocompletion, advanced refactoring, and navigation features. What’s more, thanks to the architecture of this tool, you can easily reuse and maintain code.<br /><strong>2. Apps with dynamic content</strong><br /> Since the primary purpose of Angular was to create single-page web applications, it has a wide range of tools for SPA development. What’s more, it’s an ideal technology for websites where the content should change dynamically based on user behavior and preferences. Dependency injections ensure that in case one component is changed, other components related to it will be changed automatically.</p> <p><strong>3. Progressive web apps (PWAs)</strong><br /><a href="https://developers.google.com/web/progressive-web-apps/">PWAs</a> were developed by Google in 2015. The Angular team foresees the upcoming popularity of PWAs and is working on facilitating the process of creating PWAs. Angular 5 is equipped with built-in PWA support. New CLI commands that came with Angular 6 enable developers to turn their web apps into progressive web apps easily.</p> <h2>What projects don’t need Angular?</h2> <p>Sometimes Angular only burdens your project. We don’t recommend using this tool for the following use cases:</p> </li> <li> <p><strong>Lightweight websites with static content.</strong><span> </span>Angular is ideal for websites with dynamic content, but it’s insufficient when building small pages with static content. Implementing Angular in this case only increases the overall size of the project and hence increases the load time significantly. This is the main reason why we don’t recommend you use Angular for landing pages and websites with static content.</p> </li> <li> <p><strong>SEO-optimized websites</strong>. Angular is far from being SEO-friendly, so you should refrain from using Angular when your goal is to reach the top in search results. Otherwise, be ready to make additional efforts in order to optimize your web app for search engines.</p> </li> <li> <p><strong>Short-term projects.<span> </span></strong>Angular isn’t a good solution for short-term projects or startups with limited resources. It’s also not a good idea for projects with few developers, since the front-end framework’s complexity may be hard to overcome.</p> </li> <li> <h3>Popular web apps built with Angular</h3> <p>The many benefits Angular provides to developers is the main reason why numerous popular companies around the globe use this tool for their projects. Below, we list some popular companies using Angular:   </p> </li> <li> <p><strong>Apps with a microservice design approach.</strong><span> </span>Angular isn’t suitable for applications with a microservice architecture on the frontend. If you want to be more flexible in terms of choosing additional tools, don’t opt for this tool. Angular is a complete solution —  it doesn’t give you full control of the app size by letting you select only the things you really need.</p> <img alt="These websites are built with Angular" data-entity-type="file" data-entity-uuid="dc01a505-ba37-436e-9ff7-c12b4a72f74e" src="/sites/default/files/inline-images/content_websites-using-Angular.png" class="align-center" /><p><span>There are a couple of crucial things to consider when choosing whether to use Angular. When you think through the tech stack, you should carefully analyze your project.</span><br />                                                                                                                                                          Flowing by yalantis.com</p> </li> </ul></div> <div class="field field--name-field-blog-category field--type-entity-reference field--label-inline clearfix"> <div class="field__label">Category</div> <div class="field__item"><a href="/index.php/category/front-end-back-end-development" hreflang="en">Full Life Cycle Software Development</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/index.php/taxonomy/term/65" hreflang="en">Angular</a></li> <li><a href="/index.php/taxonomy/term/67" hreflang="en">Tools</a></li> <li><a href="/index.php/taxonomy/term/68" hreflang="en">Web development</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> </section> Thu, 20 Aug 2020 09:40:07 +0000 lphamvan 120 at https://tigosoftware.com https://tigosoftware.com/index.php/angular-best-use-cases-and-reasons-opt-tool#comments