Silviu Serdaru

Silviu Serdaru

SILVIU SERDARU, Front-End & Drupal Developer

Constantly seeking to enrich the "arsenal" of technologies that I already have a hands-on experience in working with (HTML5 to CSS3, JavaScript, jQuery, PHP...) and on a permanent lookout for front-end development challenges with a Drupal-specific flavour.

Back to Blog Posts
What Hybrid App Development Framework Should You Use for Your Projects in 2020? Top 3
"Seduced" by the cross-platform approach? By the chance to build a single app project and run it on mobile, web and desktop? No wonder... But which hybrid app development framework should you choose? What's the best one? The "best" one for your feature needs (and time resources) and for your development team's level of experience... Now, let me guess: it should...   be feature-rich be fast and to enable you to develop your hybrid app... fast, as well be developer-friendly provide native-like experience to your app's users provide you with plenty of UI components to just... mix and match   We've narrowed your options in terms of hybrid mobile app development tools down to... 3.  But before you rush to evaluate each one's pros and cons:   put together a personal hierarchy: must-have vs nice-to-have features get ready to set each of the following frameworks against that pyramid of needs   1. But What Is Hybrid App Development More Precisely? In plain English: The hybrid app development approach is building and running one app project across multiple platforms: Android, iOS, Windows... Now, you do the math and figure it out yourself:   how much time you'd save  how many moments of frustration you'd avoid without all the native IDEs, SDK and Apple-specific requirements to get tangled up in how much lighter the load of third party libraries would be how convenient it is to have a unique list of bugs to keep an eye on how convenient it is to adopt one dedicated technology approach instead of having to "juggle" with Java or Kotlin and with Swift or Objective-C...   One software development process (i.e a unique codebase) for all the platforms that you target...   2. Native vs Hybrid App Development Still a bit confused about the clear differences between native and hybrid apps? Let me shed some more light here: While native apps are platform-specialized — Android or iOS — hybrid apps can be deployed on multiple platforms. In this respect, a hybrid app development framework ships with both native and web-specific elements to help you quickly design and run your "one size fits all" type of app. Also, when it comes to the key differences between native and hybrid apps, keep in mind that: While native apps are faster, hybrid apps get built faster. So, it's your convenience in terms of time and budget vs... the user experience. 3. What's the Best Hybrid App Development Framework for Your Project?   3.1. Ionic- A Feature-Rich, Easy to Use Technology for Building Your Hybrid Apps "Which framework is best for hybrid app development?" 9 in 10 developers will say "Ionic".  Source: Ionicframework.com It's the most familiar one, after all, since it's been on the "hybrid app development stage" for... quite a few years now. Back then, when it was first released, it opened the door to a whole new world of possibilities:   to build and to deploy Angular-based apps that would challenge the jQuery mobile apps' "supremacy" to put together a visually-striking, progressive web app in no time   With its low learning curve, "bulk" of available plugins and all the UI components that it provides out of the box, Ionic's predicted to keep its "rockstar" aura in 2020, as well.    You'd Want to Choose Ionic Because:   it provides you with a rich collection of powerful features it's Angular-based: no need to learn a whole new language  it ships with plenty of UI components and predefined elements it has a livereload system and app enabling you to preview your hybrid app right on your target device it ships with an in-built development server it provides you with debugging tools it ships with a command-line interface (Ionic CLI) that streamlines the development cycle of your TypeScript and Node.js apps it's backed by a large dev community   You'd Hesitate to Choose Ionic Because:   it doesn't provide hot reloading it's not the best option if you're planning to build a heavy-duty app some of its features are Cordova-based and hence not all the plugins are supported you might find it too dependent on plugins   3.2. Flutter- Google's Toolkit for Creating Visually Stunning, Cross-Platform Apps Is there any surprise why this is an increasingly popular hybrid app development framework? It's Google's "prodigy" and everybody likes Google. Although a newcomer in the "arena", Flutter stands a good chance to outshine the traditional hybrid mobile app development tools in 2020. Source: flutter.dev How? It already sets itself apart as a go-to choice when you need to craft a visually attractive and interactive MVP... fast. With its flexible design components, you get to craft a stunning UI in no time. And its interactivity elements help you create the engaging experience that users expect. In a nutshell: you get a power-packed toolkit to craft and to run a cross-platform app in no time. Where do you add that it's designed to support multiple languages and to run smoothly across several platforms. And all that without the need to look for an alternative for Swift, Java or Objective C.   You'd Want to Choose Flutter Because:   it's blazing fast it ships with its own widgets: you can easily implement buttons, sliders, switches, dialog boxes, tab bars, loading spinners it's compatible with Fuchsia, Google's mobile OS it provides you with CLI and VI editors it ships with the hot reload feature it enables you to assemble (and nest) multiple widgets for crafting your app's UI    You'd Hesitate to Choose Flutter Because:   it's Dart-based, so you need to learn a whole new language it provides minimal support for some features it lacks profile data completion your Flutter app will be approx. 40% larger than a native app   3.3. React Native- Developers' Favorite One And why do they love it?   because they enjoy working in Java and Swift (and they're already fluent in React) because it provides them with native modules and components and thus enables them to "inject" top performance into their hybrid apps because it enables them to provide users a native-like experience   It's Facebook's own version of a framework for building native-like apps. Source: facebook.github.io/react-native/ If you're familiar with the React approach to software development, you'll love it.   You'd Want to Choose React Native Because:   it's high-powered: rendered with native code you cut down costs by reusing code it's backed by a huge community of developers that you can rely on it grants you a shorter app development cycle it features live reload with 2 different screens: to update your code and to preview those updates in real-time it is Node.js supported you can choose from a whole variety of social plugins: display grid picture, feed, etc.   You'd Hesitate to Choose React Native Because:   it's not the best technology for hybrid app development if it's an app with multiple UI transitions, plenty of interactions and various screens that you have in mind its  supply of custom modules is quite limited it provides you with few UI and native features, thus "forcing" you to... get your hands dirty with code (and that may take some time) it challenges you with a steep learning code it takes a team of experienced developers to build a high-powered React Native app it presents some shortcomings of navigation components   It's definitely not a framework for junior developers and startups.   4. Final Word Do you value a native-live experience for your end-users over a fast development process?  Is a big set of UI components, that you can just... assemble, more important to you than high speed? Is a rich collection of plugins more valuable to you than a low learning curve for your developers? See? Picking the right hybrid app development framework for your project means finding the (almost) perfect match between a tool's selling points and your own priorities. So, which one's your winner? Photo by Jacob Townsend on Unsplash  ... Read more
Silviu Serdaru / Feb 07'2020
The 5 Best Automation Testing Tools for Web Applications that You Could Use in 2020 (Powerful and Easy to Use)
You save time, you keep errors to a minimum, you free up mental real estate that you could then invest in other crucial tasks included in your app's development lifecycle, you... There's no point insisting on the benefits: automating your testing process is a life-changer. But how do you know what automation testing tools for web applications to evaluate first? Where to start? Which are the most effective ones?    Those that are conveniently feature-rich and easy to use, as well? That ship as bundles of powerful features and are so straightforward, helping you create test cases in no time?   Well, we've done our research and identified 5 automated software testing tools that meet most of your criteria:   to be open source to run in a variety of operating systems and browsers to be feature-rich to be easy to use    But First: Determine What Test Cases You Should Automate To put together an effective test automation strategy for web applications you need to be really strategic. Strategic about what parts of the process you should put on auto-pilot and where it would be best to test them, as well:   don't rush in to test everything in the GUI (like record and reply, for instance); GUI testing tools do come with some significant test maintenance costs, you know whenever possible, opt for unit testing instead of GUI testing load testing, repetitive tasks, tasks that run on multiple platforms and configurations, tests that need to be “fueled' with multiple data sets... these are just some of the cases that you should automate   1. Selenium, One of the Top Automation Testing Tools for Web Applications Selenium is the... “Swiss knife” type of automated web testing tool. It comes as a heavy package of libraries and tools. Moreover, you get to run it in pretty much any:   operating system browser automation testing framework programming language   In short: it's one of the most versatile automated software testing tools that you can get your hands on. The “de facto” standard in terms of open-source test automation tools, with a large community that you can rely on. Source: G2.com And with versatility comes power, since Selenium empowers you to come up with particularly complex browser-centered test scripts. You get to use them for:   regression testing exploratory testing quick reproduction of bugs   Cons of Using Selenium For there are also some drawbacks to using this automation testing tool on your web apps to keep in mind:   a certain maintenance overhead (maintaining your tests in Selenium is more expensive compared to unit testing, for instance) building libraries and frameworks to meet specific testing needs does call for above-the-average programming skills (time and effort, as well)    2. Watir A powerful tool for automating tests. A Ruby library in fact, that mimics the behavior of a user interacting with your web app. Why would you choose Watir over other free automation testing tools for web applications? Because:   it enables you to create tests that are easy to read and to maintain you can run it on your web app, irrespective of the languages that it is written on it supports data-driven testing from buttons to links, to forms and their responses, it's built to test all the elements of your web application you can leverage its powerful API handling to extend its capabilities you get to connect it to databases, turn your code into reusable libraries, read data files, export XML you get to combine manual browsing with Ruby commands  it supports cross-browser testing  it integrates with business-driven development tools: Cucumber, RSpec, Test/Unit   To sum up: Watir taps into the advantages of Ruby — reputed for its clear syntax — which makes it such a flexible testing tool to add to your... toolkit. Source: G2.com Cons of Using Watir   a relatively small community supporting it (when you compare it to Selenium) you need to pair it with other tools to use it to its full potential   3. TestComplete If a powerful, feature-rich automated web testing system is what you need, then TestComplete checks off all the “must-haves” on your list: From cross-browser to regression, to parallel testing, it provides you with all the capabilities that you expect from a robust automation system. 1500 +real test environments... That's the type of scalability that you get if you opt for this automated software testing. It's one of those automation testing tools for web applications that you get to use on your mobile and desktop apps, as well. For pretty much any type of automation task that you can think of... Source: G2.com Cons of Using TestComplete Some users have reported errors with object recognition during playback. So, you might want to keep that in mind. 4. Katalon Studio Easy to use and robust.  Source: G2.com What more could you ask from an automated UI testing tool than:   to be conveniently accessible to any type of tester, those with no programming background here included to ship with a whole set of powerful features   And speaking of those, here are just some of the capabilities that you can turbocharge your testing process with:   customizable execution workflow support for image-based testing smooth integration with a variety of tools (e.g. TeamCity and Jenkins) built-in support for generating test scripts, creating test cases, reporting results, recording actions built-in object repository, object re-identification, Xpath built-in support for Groovy/Java scripting languages visual representation of each step in the test (it's one of the most beginner tester-friendly tools out there)   Moreover, Katalon Studio is one of those automation testing tools for web applications that you can use for API and mobile testing as well. 5. Cucumber Here's another open-source automated software testing tool to consider putting on your shortlist. A collaborative tool based on behavior-driven development that you can use to:   write acceptance tests for your web apps perform those tests by running the most representative examples for your app   Now, one of the biggest strengths of this tool is the up-to-date document that it'll provide you with. One incorporating both the test documentation and the specification. Source: G2.com Anyone in your team (non-testers) can go through it since it's written in a highly accessible format (plain English). Now, if we were to sum up its “power” features:   it enables you to reuse code in your tests it supports lots of different languages Groovy, Python, Perl, PHP, .NET, Scala it grants you great support, since it's a highly popular automated app testing tool, with a large community  it enables you to use code along with Watir, Selenium, Capybara it's a cross-platform tool quick set up it enables you to generate detailed reports it integrates with GIT and Jenkins   Cons of Using Cucumber    you might find the default organization a bit... overwhelming you depend on external plugins for generating reports, so do expect some integration challenges The END! These are the top 5 automation testing tools for web applications that you should check first when getting your 2020 toolbox ready. Have you used any of them? If so, what's been your experience with it/them? And what other automated web testing tools would you have added to this selection? Let us know in the comments down below: Image by testbytes from Pixabay     ... Read more
Silviu Serdaru / Jan 21'2020
Why Would You Build Your Own Cloud Native Drupal Platform? The Main Benefits and Challenges to Consider
Why or rather "when" should you consider building your own cloud native Drupal platform?  Is a container-based infrastructure a viable solution for you? For your business needs? How do you know if your specific use case calls for a cloud-native Drupal development environment? And, assuming that you've run your own evaluation and that your use case does demand a switch from your current VM to a... multi-cloud Drupal hosting architecture: How do you make Drupal... cloud native friendly?  So that you can build, deploy, scale and manage fast and resilient Drupal apps in the cloud? In this post, we commit to answering all your key cloud-native and Drupal-related questions:   "What does cloud-native mean exactly?" "What is cloud-native with respect to Drupal?" "Why do I need a cloud native Drupal platform anyway?" "What are the biggest advantages and their... flip sides?" 1. What Does Cloud Native Mean Exactly? What is a cloud-native application? It's a holistic approach to designing, building, and running applications that make the most of cloud-native concepts. Or, if you wish: Cloud-native application development is a methodology — covering all stages of an app's lifecycle: design, deployment... operations — for developing apps that run in the cloud.  Applications that use the cloud computing model to its full potential. DevOps, agile, microservices and other modern software architectures all fall under the umbrella of a cloud-native methodology. Therefore, it's fast, resilient, highly scalable and easily maintainable applications that you get to run in a cloud-native infrastructure.   2. And What Is Cloud Native with Respect to Drupal?    In other words: where does Drupal fit in this revolution in how we develop and deploy our applications? Overall, taking full advantage of a cloud native Drupal development environment means: Finding the best solution for handling decentralized storage, auto-scaling, auto-provisioning and multi-region fault tolerance. Getting the most of cloud-native and Drupal comes down to:   minimizing the use of long-running servers relying more on purpose-built services and elastic computing setting up a development environment where you can easily test your new themes and modules, fix bugs, build, and deploy resilient enterprise Drupal apps   3. Why Build Your Own Cloud Native Drupal Platform? And When? For there are cases (is this your case, too?) when such a powerful, yet... challenging architecture is not justified by the company's business needs. So, let's answer your "when" question first. You're better off with a cloud-native infrastructure, where you deploy Kubernetes and containers, if:   you're dealing with high traffic, high volume applications and polyglot architecture you already have an Ops team you've already made at least some sort of investments in the private or public cloud your current requirements in terms of costs and control justify setting up a multi-cloud architecture you're running and maintaining an entire ecosystem of Drupal sites   "OK, so it looks like I "qualify" for it. But still: what would be the biggest advantages of building my own cloud-native platform compared to opting for a cloud vendor's services?" Here are the 2 most obvious advantages:   you'd avoid getting locked-in to a cloud provider you'd avoid growing dependant of your PaaS provider for hosting, scaling, and managing your own Drupal apps   4. Why Would You Want to Containerize Your Drupal Apps in the First Place? What would be your major wins if you ran Drupal in containers? Here are the 3 most significant ones:   repeatability and consistency: you get the same predictable and specific result with each container that you run less maintenance work an easier way to run PHP upgrades compared to a conventional VM stack where you depend on your host for that and where there's a whole cluster of sites that needs to get PHP upgraded simultaneously   5. 3 Pillers of a Container-Based Infrastructure: Drupal, Kubernetes, Docker What goes into a cloud-native Drupal platform? There are 3 key players involved:   5.1. Drupal The robust content management system which, beginning with its 8th major version, grew into a Symfony-based content management framework. Backed by a huge (100K+) and active community of contributors and a rich plugin ecosystem, Drupal powers a wide variety of web applications: media and entertainment apps, non-profit, gov, education... 5.2. Kubernetes It's the standard container orchestration technology.  In the context of your future cloud-native infrastructure, you'll be using it to manage:   your containers' lifecycle command and control distribution scheduling   5.3. Docker It's the standard... tool that you will be using for creating your containers. 6. 4 Cloud-Native Platform Features to Put on Your Wishlist What feature requirements should you have with respect to your Drupal development environment? Here's how a... decent wishlist should look like:   it should provide a layer of abstraction over IaaS it should handle cross-cutting concerns it should be easily scalable and secure it should provide an efficient developer experience (and agile operator experience, as well)   7. Deploying Your Drupal Apps on the Cloud: Requests & Constraints What's the proper set-up for a container-based Drupal architecture? "What are the key requirements that my future cloud-native Drupal platform should meet?" you might legitimately ask yourself.   your Drupal application should be turned into a containerized stack minimal Ops (or not Ops at all) it should run properly on any cloud your public/private file should be externalized it should scale up, out, and down it should make the most of PaaS services: for gateways, databases, load balances, cache stores, queues it should tap into an operational model: new app provisioning-routing-monitoring... your development team should be able to get high fidelity local environments up and running in no time   "And what challenges should I expect?" you'll further wonder:   your developers are faced with a steep learning curve: they should have some sort of understanding of what's happening under the hood when deploying Kubernetes CI & Delivery Pipeline  logical architecture monitoring and management Dev & Build Tools  local development    The END! What do you think: Is a cloud native Drupal development environment a viable solution for you?  Are the advantages highlighted here relevant enough for your use case and business needs? Or are the outlined challenges too discouraging for you? Feel free to share with us any thoughts and concerns that you might have regarding the idea of building your own cloud native Drupal platform. Photo by C Dustin on Unsplash  ... Read more
Silviu Serdaru / Dec 12'2019
What Are the Best Continuous Deployment Tools for Kubernetes and Why? Top 5
So, getting your apps up and running with Kubernetes has been a quite unexpected pleasant surprise. But now comes the... predictably challenging part: updating and deploying them. How do you set up a solid automated deployment pipeline? What continuous deployment tools for Kubernetes meet all your specific feature-needs? Feature needs like:   canary deployment release management secrets and variable storage in the tool itself (i.e. not in Kubernetes) easy rollbacks continuous-integration rolling and orchestrating application deployment  UI blue-green deployment monitoring infrastructure and applications    And the offer of tools geared at making deployment more efficient sure is... overwhelming enough.  But fear not, for we've weighted some of the most popular Kubernetes cluster deployment tools' pros and cons, we've compared them to one another and shortlisted your bulky list of options to... 5. The 5 best dedicated tools to orchestrate your releases with Kubernetes:   0. Manual Deployments vs Continuous Deployment Tools for Kubernetes Why not just build a fully customed deployment script like... so many organizations out there still do? It would fit your specific in-house processes and particular feature needs like a glove, wouldn't it? "In a soon to be released survey by Codefresh, 32 percent of developers reported they don’t have CI/CD or the right kind of automation tools to help them deploy more often, making it challenging to take advantage of cloud-native technologies." (source: Devops.com) Well, let me give you 8 key reasons why maintaining such a script would turn into a dread in the long term. And why going with an “off-the-shelf”, “enterprise-level” solution would benefit you n times more:   maintaining a deployment script is a slow and time-consuming process   a custom build turns into a major challenge once you need to scale it up   running manual Kubernetes deployments, that engage a large development team, is always more prone to errors   managing rollbacks, keeping track of old and new deployments — particularly when dealing with a large team and a complex app — is n times more challenging (and riskier) when using manual deployments compared to running the right CD tools    automated deployment tools for Kubernetes enable you to run specific deployment strategies like blue-green or canary   YAML files have gained a reputation of being particularly error-prone; Kubernetes application deployment tools will streamline everything, from creating YAML files to generating and templating them   storing secrets, managing them among multiple developers, across different repos, calls for extreme cautiousness and so... can get time-consuming and prone to “accidents”   upgrading the entire ecosystem of resources that your Kubernetes app depends on gets quite challenging; by comparison, automating the entire updating workflow, using the right tooling, will help you save valuable time   In short: if scalability, maintainability and close to zero risks of failure are your two top priorities, choosing the right tooling for your continuous deployment workflow with Kubernetes becomes critical.   1. Fluxcd.io   One of the best Kubernetes deployment tools that you could "turbocharge" your workflow with. Here's why: Source: Fluxcd.io   you can use it in production it relies on an operator in the cluster to run deployments inside Kubernetes: in other words: you won't need a different continuous deployment tool it detects new images, keeps an eye on image repositories and updates the running configurations based on a configurable policy and the configuration set in git it checks that all config updates and new container images get properly pushed out to your Kubernetes cluster it adjusts itself to any development process   In short: Flux will automate the deployment of services to Kubernetes. Now, here's Flux "in action", in one of its typical use cases: One of the developers in your team makes some changes... the operational cluster needs updated now... Flux detects the changes and deploys them to your cluster and keeps monitoring it. Long story short: that developer in your team won't need to interact with an orchestrator; Flux provides him/her with a CLI to run all these operations manually.   But there are also 2 cons for using Flux as your automated deployment tool:   it lacks webhook support it lacks multi-repo support   Tip: use this automated deployment tool at the end of the Continuous delivery pipeline.   2. Spinnaker.io What's Spinnaker? Source: bmc.com A cloud deployment tool developed originally by Netflix, then open-sourced, that comes with support for Kubernetes. How does it work with Kubernetes? It's designed to complement Kubernetes, to make up for its limitations: it provides robust deployment pipelines that allow you to "joggle with" various deployment strategies. Why would you choose Spinnaker over other continuous deployment tools for Kubernetes?  Because:   it provides deployment pipelines, easy rollbacks and scaling (right from the console) it's open-source it integrates seamlessly with email, Slack, Hipchat, thus making pipeline notifications a breeze you get to use it for all types of Kubernetes resources (it's not "limited" to deployments) it supports Helm charts it handles blue/green and canary deployments and ships with support for any CI tool and cloud provider it'll monitor your Kubernetes app's (and cluster's) health   In short: you'll want to use Spinnaker if it's a robust, fully automated CD pipeline for Kubernetes that you want to set up; one "packed" with all the best practices, that'll help you streamline the deployment of apps.   2 Typical Use Cases for Spinnaker:   you use packer for building an AMI in one of the stages and you deploy it to production; Spinnaker allows you to closely monitor the state of your deployed application to perform tests, detect a container image push and deploy that image to Kubernetes   3. Codefresh.io     Source: Codefresh.io Not just one of the continuous delivery tools to consider, but THE first Kubernetes-native CI/CD technology. Codefresh is a GUI-based environment that streamlines your Kubernetes app building and deployment process. Here are just some of the most powerful reasons why you'd add it to your box of continuous deployment tools for Kubernetes:   it supports Helm charts it allows you to use your favorite tools: favorite CI, image repository, repo... it ships with a whole set of plugins that enable you to hook it to your favorite CI/CD tools (e.g. Jenkins)   And a few cons of using Codefresh:   it won't store your secrets/variables its plugins are set up from their own GUI: if trouble strikes, addressing the problem might make your pipeline unnecessarily complex it doesn't handle cluster credentials living outside your cluster, leaving it exposed to imminent risks   4. Argo CD   Source: Argoproj.github.io Another one of the best Kubernetes deployment tools to consider when you're planning your continuous delivery workflow. How does Argo CD work? Argo uses git repositories as a reference for the target state of your app and the target deployment environments. It will synchronize your desired app state with each of the target environments that you'll define. It's a declarative continuous system that it will provide you with, one supporting a whole variety of config management tools: Helm, ksonnet/jsonnet... Argo CD's top features, that make it worthy of your shortlist, are:   it provides continuous monitoring of your deployed apps rollback/roll-anywhere-in-the-git-repository features it ships with webhook support (BitBucket, GitLab, GitHub) it provides sync, presync and postsync hooks for complex app rollouts it provides SSO integration (GitLab, OIDC, Microsoft, LinkedIn, SAML 2.0, LDAP) you can use it alone or as a component of an existing setup of pipeline tools    5. GitLab An automated delivery tool designed to meet even the highest feature needs:   Auto DevOps provides you with pre-built CI/CD configuration, so you can automatically identify, build, test, deploy and further monitor your Kubernetes apps it works with any Kubernetes cluster (you won't depend on GitLab's infrastructure) it allows you to use Containers as a Service or a self-hosted Kubernetes cluster on any public cloud it provides you with CI support out of the box it allows you to choose between its auto-deploy component for Kubernetes and Helm charts Overall: GitLab will simplify and streamline your entire Kubernerted app development cycle. Use it if you need an end-to-end automated deployment pipeline that doesn't depend on too many configurations. It makes that off-the-shelf solution that fits your scenario perfectly.   The END! These are the 5 continuous deployment tools for Kubernetes to start evaluating first as you're getting your toolbox ready.  Do you have a continuous deployment pipeline in place? What other great tools are you using to orchestrate your app releases with Kubernetes? Image by Astryd_MAD from Pixabay   ... Read more
Silviu Serdaru / Nov 26'2019
How Do You Prepare for Drupal 9? 5 Tools to Detect Any Uses of Deprecated Code on Your Drupal Website
How should you prepare for Drupal 9? You deep clean up your codebase of all deprecations and errors and wait patiently for the big upgrade to... happen. “But how do I know whether my Drupal website's using any code deprecations?” you'll legitimately ask yourself. How do you identify and make an inventory of all the code errors on your site, so you can remove them and start... waiting, patiently, for that big upgrade to Drupal 9? Well, you “stuff” your toolbox with all the essential tools that'll help you track down deprecations (still) lurking in your codebase. Here are the 5 most effective ones:   1. Drupal Check  You can't claim that you're getting ready for Drupal 9... the proper way if you're not already using Drupal Check to scan your codebase for deprecations. “But what is Drupal check?” It's a command-line tool — a custom runner for PHPStan — that enables you to run PHPStan against your Drupal website to look for any deprecations and code errors. In short: instead of running PHPStan, you run Drupal Check, which comes as a package storing PHPStan, PHPStan Drupal, PHPStan's Deprecation Rules, plus configurations for them all, as well. Source: glamanate.com Just incorporate it into your build processes and continuous integration systems and run audits on:   your custom and contributed modules, checking their compatibility with Drupal 9 your D7 to D8 migration code   Use it on your existing Drupal 8 website. Or use it on the one that you're developing, when you're nearly done, to check whether any deprecations have made their way to your codebase... Word of caution: expect Drupal Check to provide you with an accurate report of the deprecated code used on your site, but don't expect it to fix them for you, as well.   2. Upgrade Status Module   Here's another “tool” that you shouldn't miss from your toolbox. That if you do want your website's upgrade to Drupal 9 to be... buttery smooth. Source: Drupal.org What the Upgrade Status module does is:   inspect your code — your custom and contributed projects — for deprecations make an inventory of all the identified issues    Moreover, its Drupal 8 version harnesses the power of PHPStan and comes as a complete solution that you can use for running full-site checks. Let it work its “magic” on your Drupal site and find out where it stands in terms of compatibility with Drupal 9.   3. PHPStan & PHPStan-Drupal         PHPStan's the very foundation of the toolkit to rely on when you prepare for Drupal 9.  Source: Matt Glaman's Twitter page Not only that you save valuable time using it, time that you'd otherwise invest in pinpointing every error spotted during your code reviews:   classes called incorrectly nonexistent classes PHP projects that you forgot to run once you compiled them   …  but you get to write your own custom rules. You get to indicate specific “red alarm” situations that you'd want PHPStan to... investigate for you. Now, it may be the key tool to keep at hand when you evaluate your site's compatibility with Drupal 9, but nevertheless... it does have its own limitations: It won't load any files on its own if you run it against a Drupal module out of the box. It depends on Composer to load all that information... Luckily, Matt Glaman's developed an extension to address precisely this... limitation of PHPStan: phpstan-drupal.  An extension that'll help you make the most of PHPStan when using it to scan Drupal code: from your various dependencies to... Drupal core.    4. Use Project Deprecation Status to Prepare for Drupal 9  And what this tool does is answer one key question: “What's the current status of the Drupal modules in terms of compatibility with Drupal 9?” Which Drupal projects are already compatible and which of them need more fixing before the big upgrade? Project deprecation status is the right tool to... gain an accurate picture of where each Drupal project stands in relation to upcoming Drupal 9.   5. Rector        So far I've pointed out the 4 key tools for deep-scanning your Drupal website to detect any uses of deprecated code as you prepare for Drupal 9. But what if you want to get rid of that pile of deprecations that you will have collected by the end of the scanning process? How do you fix/remove them? And, more importantly: how do you automate this code cleaning process? In this respect, Rector for Drupal 8 — a proof of concept for now — comes with great potential: Check it out and... be prepared to add it to your toolbox for any automated deprecation fixes that you'll want to perform on your site.   The END! These are the 5 essential tools to have in your toolbelt for running deprecation checks on your Drupal website, getting all ready for Drupal 9. Would you have added some other must-have tools to the list, as well? Let us know in the comments here below: Image by Michael Schwarzenberger from Pixabay ... Read more
Silviu Serdaru / Nov 22'2019
What’s New in Drupal 9? Olivero, A New Default Front-End Theme in Drupal
"What's new in Drupal 9?" or "What are the new features in Drupal 9?" These 2 questions are on everyone's lips these days, both Drupal teams and organizations using Drupal. How about a... shiny new main theme? For, let's face it: we've been longing for a new default theme in Drupal for some time now...  The current one, Bartik, hasn't got an update since... 2011 and it has started to show: Drupal 8's outgrown its core theme. The new one, Olivero, which is still just design with a proof of concept, is expected to address all of Bartik's limitations:   to be more simple to be more modern to be more flexible to support Drupal's increasingly powerful functionality   But let's dig in for some more info about this initiative:   why do you need a new default theme in Drupal? the key design principles established for this theme the main components of the new design system   1. How Does Your Ideal Default Theme for Drupal Look Like?  Does it resemble Bartik? I'm pretty sure it doesn't, judging by the fact that:   it hasn't seen a major change since January 2011 it still uses gradients, drop shadows and other out-of-date graphical elements it no longer accommodates all the modern website functionality implemented in Drupal (e.g. Layout Builder) over the last years   Overall: Bartik has started to look a bit... out-of-fashion, while Drupal's back-end has been growing more and more robust. Therefore, I bet that the words that you'd use to describe your "ideal" default theme in Drupal revolve around these key adjectives:   clutter-free/minimalistic flexible: to provide plenty of options to choose from light modern and fresh accessible intuitive elegant clean   2. Olivero and The 3 Main Goals Behind this Drupal Core Initiative No goal no... glory. That's why the team behind this Drupal core initiative, Lullabot, set 3 major objectives for the Olivero theme:   it should support all the latest functionality implemented in Drupal: embedded media, second-level navigation, layout builder, etc. it should be WCAG AA compliant from the ground up (accessibility should not be an afterthought) it should look and feel more modern: all those design elements that made Bartik feel too heavy to be reduced to a minimum, while particular design system parts — color palette, typography, and animation — to be reconsidered   3. What's New in Drupal 9: Design Principles Set for Its Theme Source: Dries Buytaert's blog Curious which of the features on your wishlist for an ideal default theme have made it to the list of design principles for Olivero? Well, here they are:   simple: clutter-free; by "clutter" they mean all colors, effects and visual elements that are irrelevant and make the theme look and feel too heavy modern: support for modern browsers' features and interaction modes flexible: presents Drupal (front-end) developers with multiple options to choose from focused: includes all those design elements, like negative space and high contrast, that grab user attention accessible: it's designed with WCAG AA conformity in mind; from functionality to layout, to colors, all elements should be thought out to be accessible for everyone   4. The Olivero Design System: Key Components "What's new in Drupal 9?" Look forward to a new, promising design system. I'll highlight just 5 of its components, so you can get an idea of what the team behind this initiative mean by "modern" and "flexible" in relation to the Drupal 9 default theme: Source: Drupal.org 4.1. Color Palette They chose:   bright blue as the base color neutral grays to counterbalance the design elements and layout darker colors to enhance accessibility lighter colors in the layout to highlight the design elements   4.2. Typography They used the size 18px for the base font in the body copy, to be leveled for metadata, headers, quotations, etc. and adapted to smaller viewports, as well. Consistency, throughout line-height and spacing, has been a key goal when setting the scale for typography.   4.3. Header & Navigation The flexibility principle is best reflected in the header of the future default theme for Drupal 9:   it's designed to incorporate, seamlessly, all logo types and text titles it comes in multiple versions to choose from, one for every site identity type it turns into a hamburger menu once the user scrolls down   4.4. Sidebar The news factor is that in Drupal 9 you'll have one sidebar region instead of two competing for space on the screen. A single spacebar, next to the primary content, where your content team can display related posts and all kinds of utility blocks.   4.5. Site Branding Variations The Olivero theme will ship with background-color and width settings that you can configure in order to fit any text length and logo type.   5. Final Word "What's new in Drupal 9?" I think this question is not quite accurate, in relation to this upcoming front-end theme. "What's bound to be new in Drupal 9?" is more appropriate. For the Olivero theme is not yet... a theme in itself, but work-in-progress. A proof of concept, a core initiative that's still calling out for contributors. One that's expected to become the new default theme in Drupal, that should:   accommodate all the new powerful features implemented in Drupal these last years be accessible from the ground up be (more) intuitive    Why would you care for this initiative if you were a Drupal developer? Because it would improve your entire experience of working with Drupal. Why would you care about this work-in-progress theme if you were considering Drupal for your next web project? Because all visually-appealing websites have one thing in common: a modern, accessible and flexible theme. Image by Mudassar Iqbal from Pixabay ... Read more
Silviu Serdaru / Nov 13'2019
What’s the Fundamental Difference Between Gatsby and Next.js? How Do You Choose?
You're building a React website/application. You have your bulky list of functionalities all set, you know how you want it to look, but can't decide on the React framework to build it on: What's the main difference between Gatsby and Next.js, after all? And what's the difference between server-side rendering and static site rendering? Since both frameworks seem to be serving your main goals:   not to get tangled up in config or routing to generate a fast, fully accessible and SEO-friendly website to provide you with boilerplate application   So, what's the fundamental differentiator between Gatsby and Next? The one(s) that'll help you identify the framework that best covers your specific use case. Or, are there several of them (differentiators)? Just keep on reading:   1. But First: What Do Gatsby and Next.js Have in Common? How are they similar?    they're both React frameworks they're both great options for SEO purposes they're both great options if you need a high performance React app/website they both provide entirely formed HTML pages they both provide boilerplate application they both simplify and speed up the React app/website development cycle  they both generate SPA out-of-the-box they both provide great developer experience   In short: both Next.js and Gatsby score well in categories like speed and SEO; they're both awesome solutions to streamline app/website development in React. But the way they go about it... that's where these frameworks are fundamentally different.   2. How Does GatsbyJS Work? It builds HTML code on build time. That would be the short(est) answer to your question. But if we were to elaborate upon it: GatsbyJS is a static site generator that... generates (static) HTML code during the “build” process. How? It fetches data from external sources — APIs, Contentful, WordPress, markdown files —  and uses GraphQL to render it. Example: say you have a blog. In this case, you could use Gatsby to fetch your blog posts from... Contentful. Or any other repository where you might be storing your content (e.g. WordPress or Drupal).   3. What's Next.js? A tool for rendering pages on the server-side. And a more detailed answer would be: It's a React framework that supports server-side rendering. Meaning that it generates the needed HTML code dynamically, from the server, each time a request is being sent through. In short: your browser's provided with pre-rendered HTML code instead of empty “div”. Now, how does its distinctive way of going about building a React app/website suit you? It enables you to develop multi-page applications using static rendering and serving dynamic data from a back-end.   4. What Are They Used For? Specific Use Cases for Gatbsy and for Next.js What's the difference between Gatsby and Next.js in terms of use case? In other words: when should you choose one over the other?   4.1. Specific Use Cases for GatsbyJS 1. Blogs and small-scaled websites And I'm talking here about a particular scenario: When you have no comments section on your blog or, at least, not a very “busy” one. So, a use case where you don't need to render content every 5-10 minutes. Since blogs are static and their content doesn't change that frequently, Gatbsy's ecosystem makes the perfect fit for them.  And you have 2 options for your blog post creation and publishing process:   you write a blog post and the npm build will generate a corresponding HTML page you write a blog post in Contentful (or a CMS of your choice), publish it and recompile your blog in Netfly   2. Landing pages Again, since they use static content, landing pages make an ideal use case for GatsbyJS.  Where do you add that Gatsby “spoils” you with such a wide collection of plugins to choose from and to boost your landing page with: PWA, inline critical CSS, AMP...   4.2. Specific Use Cases for Next.js 1. Content-packed websites Dealing with lots of content? Or are you expecting your site's content load to grow, over time?  Then Next.js should be your first choice.  The reason is simple: Just imagine your Gatsby framework overstrained to rebuild all that content over and over again. Not precisely the most time-effective solution to go with, don't you think? 2. When you need more freedom for accessing your data Do you want to empower your content team to publish content on their own? Then you might want to consider Next.js.   3. To-Do Apps They make the perfect use case for server-side rendering: Next.js retrieves the content for your list, from the server, and displays the to-do's upfront.   5. The Fundamental Difference Between Gatsby and Next.js Is... … that Gatsby's a statically generator, while Next.js generates HTML dynamically.  Image by Colin Behrens from Pixabay The first creates JS/HTML/CSS at build time, while the second generates it at run time. Or, if you wish to put it this way: Gatsby doesn't depend on a server, while Next can't function without one.   6.4 Other Main Areas Where They Differ For the “Gatsby vs Next” debate doesn't end at the “static vs dynamic” comparison.  There are other factors, as well, that set these 2 React frameworks apart. And we'll outline the 4 most obvious ones:   6.1. Data Handling In case of Gatsby, the framework's the one “deciding” how you should handle data in your app. It needs to know where your data, your images and other types of content will be handled.  What's in it your for? Why would you accept this... “compromise”: to be told how to handle data in your own app? Because: Gatsby, through its rich collection of plugins, enables you to hook up your site to various data sources. This way, you gain external control over your data... By comparison, Next's totally unopinionated. Is gives you the freedom to decide your own data architecture. In short: it doesn't “tie” you to a specific technology. You're free to handle data your own way.   6.2. Deployment You can deploy Gatsby anywhere you need to, with no special configurations, since it's no more than compiled CSS, JS, and HTML. And things are equally straightforward with Next.js, as well. Since it's a Node application, you can host it anywhere you want to...   6.3. Routing With Gatsby, you have a pages directory where you're free to create all the HTML pages needed for your app/website.  Moreover, they provide you an API, as well, for creating routes dynamically. With Next.js you get a “pages” folder, as well, where you can set up your new pages and get your app running, with no routing to config.   6.4. Plugins “What's the main difference between Gatsby and Next.js?” Plugins sure are a powerful differentiator. Gatsby comes “loaded” with an entire ecosystem of plugins.  So, do you need to have your JS minified, you CSS compiled, your...? There must be a Gatsby plugin for it. Image by Michael Schwarzenberger from Pixabay   Next.js, on the other hand, doesn't “tempt” you with plugins, since its smaller scope doesn't justify the usage of plugins... The END! These are the key differences between Next.js and Gatsby, along with their common points and specific use cases. Have you had your “Aha!” moment(s) reading through our post? Have you managed to identify the right framework for your own use case? Photo by Charles ?￰゚ヌᆳ on Unsplash ... Read more
Silviu Serdaru / Nov 12'2019
React Native vs Flutter: Which One to Use to Build Your Cross-Platform App With? And Why?
They're both open-source and some highly popular options for cross-platform app development. They're both backed by huge tech communities... so your struggle is real: "React Native vs Flutter: which one should I go with?" On one hand, you have Flutter, which has gained momentum incredibly fast this year, putting the same question on most developers' lips: Will Flutter replace React Native? On the other hand, you have React Native, which has been around for +4 years now and uses "good old" JavaScript. Should you place your bid on "familiarity" and reliability or should you take the leap and go with a newer, but so promising platform instead? Speaking of which: What are Flutter's selling points more precisely? Those that have instantly propelled it in developers' radar so quickly? Why would you choose Flutter over React Native? And when is the latter the best option?   1. Why Choose Cross-Platform App Development in the First Place? Why would you go with this approach to mobile app development instead of taking the "native" path? Here are the most powerful reasons:   you get to write (most of) your code once and use it on multiple platforms you get to tap into the features of your cross-platform framework of choice to develop various types of mobile apps: social apps, eCommerce apps, interactive apps you get to build a native-like app without getting tangled up in Android, iOS or Java development   Notes:    optimizing your cross-platform app might get discouraging if you're not prepared for it expect it to be less performant than its native counterpart your platform of choice might not ship with all the functionalities that you need (Bluetooth, GPS...), so consider creating new plugins or opting for 3rd party ones to compensate for the lack of certain native features   2. React Native Is an... ... open-source JavaScript framework — or a new version of React, if you wish — launched by Facebook, used for building Android and iOS mobile apps. Source: Facebook.Github.io How does it work? What kind of "witchcraft" does happen under its hood that enables you to build a hybrid app? One that works both on iOS and Android? React Native uses a JavaScript bridge which... bridges your UI code to native components.   3. Reasons Why You Would Choose React Native over Flutter: Top 3   Source: Google Trends So, going back to our "React Native vs Flutter" dilemma: why would you go with Facebook's "prodigy"?   because it's written in JavaScript (entirely) and so it's much easier to find experienced JS developers for your app project because it's more... mature: it's been around for +4 years, which translates into reliability and a high level of popularity among developers because it streamlines the app's development cycle: it's faster (just think "ready-to-use components") to build app-like experiences with React Native than with Flutter   4. Flutter Is... ... Google's open-source SDK, written in Dart, used for building cross-platform apps. How does it work? It leverages the skia rendering engine to render Dart-based UI in both Android and iOS. Source: Flutter.dev 4 Key Features of Flutter:   design-specific features entirely customized environment platform-specific SDKs native-like performance   5. Flutter: Biggest Selling Points and Main Weaknesses What makes this "new kid on the block" so tempting among developers? Source: Stack Overflow What does it bring to the table that React Native can't provide?   it's easier to install it: when using React Native, many developers choose to use Expo precisely for this purpose; there's no way of automating the whole process and you bump into errors pretty often   it's easier to test it compared to the complicated setup that you need to do for testing a React Native app   it uses proprietary UI widget sets (by comparison, React Native uses native components), which give you more freedom to customize your UI block components   it benefits from first-party support for its iOS-style and material design widgets   it uses object-oriented design (due to Dart)   it performs better: Flutter's slightly faster since it depends on a JavaScript bridge, like React Native, for interacting with native components   it speeds up the UI designing process (React Native uses native components, while Flutter uses owner widgets)   And this last one is Flutter's most "seductive" feature:  It allows you to create a new custom layout in no time. "And why would I be hesitant to choose Flutter over React Native?" you might also ask yourself. Here are some of the aspects that might discourage you from using Flutter for building your cross-platform app:   there aren't so many developers working in Dart, the language used for writing Flutter, compared to the deep pool of JS professionals  the development process is a bit lengthier it's still relatively a young platform: you might not have a library for every functionality that you want to implement; not just yet...   6. React Native vs Flutter: You'd Be Better Off With... ... Flutter if:   you need to have your app running on both Android and iOS you're already an experienced C++/Java developer (or developers in your team are), since it'll then be easier for you to learn Dart  high performance is on top of your priority list you want a visually-appealing UI for your cross-platform app   And opt for React Native if:   you're already an experienced JavaScript developer  you put a high value on the support of a giant, mature tech community   The END! How do the scores look like on your evaluation list? Which of the 2 cross-platform solutions would you go with and why? Let us know in the comments below: Photo by Coffee Geek on Unsplash    ... Read more
Silviu Serdaru / Nov 06'2019
What Is Next.js Used For? Is It a Good Fit for Your Project? 2 Clues that You Should Use It
It sure is “the thing” these days. But does that make it “the perfect... thing” for your project, as well? For your specific project needs and priorities? What is Next.js used for more precisely? Can it handle both portfolio sites, let's say, and... particularly large web projects? Is it the best fit for both rarely and frequently updating websites? For both websites depending on a rich third-party ecosystem and those that don't use so many libraries? Let's dig up some answers on:   when (and when not to) why … to use Next.js.   1. But First: What Is Next.js? It's a lightweight React framework used for server-rendered and static web applications.  Now, if we were to highlight some of its main features, any shortlist would have to include:   (default) server-side rendering ecosystem compatibility prefetching HMR and Error reporting automatic code-splitting   Note: since it resembles PHP development so much, many developers find it easy to “jump on the Next.js bandwagon”.   2. And How Does It Work? Next.js renders your React app/website on a server (as opposed to being rendered on the client-side). Source: GoogleDevelopers So, do keep in mind that you'll need to have a server... somewhere. The main gain here is that it supports scenarios where data has to be updated in real-time. As for the drawbacks of server-rendering:   higher level of complexity: expect to write more code to get everything working properly it's a bit more challenging when dealing with third-party services a bit more difficult to deploy (compared to client-side rendering and HTML)   3. What Is Next.js Used for? What Types of Projects Would You Use It For? Now, back to the question that generated this blog post in the first place: When should you consider Next.js? When is it the best choice? Does it serve your... specific use case, for instance? In this respect, we've identified 3 types of projects that Next.js makes the best fit for:   3.1. When SEO is your top priority Do you need SSR (server-side rendering) to ensure SEO-friendly pages on your website? Then Next.js is your only option. It's built to serve precisely this type of project, where good SEO is a crucial objective.    3.2. When content gets updated particularly often Let's say that new and new data gets uploaded on your website and that the content on your web pages needs to get updated within... 3 minutes, maximum. Source: When Should You Use Gatsby? And I'm thinking here: news sites large eCommerce websites property listing websites where new comments get added and descriptions updated on a regular basis   In short: if you expect content on your future website to get updated often, then it writes Next.js all over your project.   4. Final Word Now, would you care for a piece of advice? When trying to answer questions such as:   “What is Next.js used for?” “Should I use it on my project or should I go with static?”   … make sure you evaluate both your short-term and long-term needs. In other words: your website might not need to update its content frequently right NOW, but maybe you're considering scaling it up in the future... For in that case, build performance and SEO will become some key requirements and your client-side or static architecture won't serve your goals anymore. Just make sure you coordinate your final choice with your future goals, as well. Image by Lynn Neo from Pixabay   ... Read more
Silviu Serdaru / Nov 04'2019