Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Simple introduction to Web development

Ahmad Alfy
February 18, 2021

Simple introduction to Web development

Ahmad Alfy

February 18, 2021
Tweet

More Decks by Ahmad Alfy

Other Decks in Programming

Transcript

  1. By Ahmad El-Alfy Web development career

  2. None
  3. None
  4. https://apply.workable.com/robusta/

  5. What is Web Development It’s a part of the software

    industry that was born after the widespread adoption of the internet back in the 1990s. It’s about building applications and websites that uses the internet as their backbone.
  6. What is Web Development Early when web development was born,

    the main consumer of the end product was the web browsers. Now there are plenty of mediums that rely upon web development as well like mobile applications, IoT devices, smart fridges … etc.
  7. Old Roles Web Developer Mostly working on the server side

    compnoent of the applications and integrate the output of the designer. Web Designer Work on the visual design and create the HTML and CSS with the help of graphic authorization tools.
  8. New Dawn With the rapid growth of web technologies, designers

    were left to work on visual designs only without producing code and specializations where born. Server-side vs Client-side programming.
  9. Frontend Languages It’s the part of web development concerned with

    building components that run inside web browsers. It’s done using the following languages: HTML, CSS and JavaScript
  10. Frontend Development Environment It takes part in one of the

    most hostile environment known to programmers; web browsers. The reason why it is difficult is because browsers have different capabilities and support for features. A feature you might rely upon might not be available to your user. This is why a deep understanding of cross browser compatibility is essential to create a working solution
  11. Responsive Design And it’s not just different versions of browsers.

    It’s different devices as well. The list is endless, we have desktop devices, tablets, phones, smart watches, smart fridges connected to the internet, gaming consoles … This lead to the birth of a practice called responsive web design.
  12. Synchronized URL testing across 27+ devices Source: HTML5Rocks – Syncrhonoized

    Cross Device Testing
  13. Frontend Development A commonly asked question about frontend development is

    if it is related to visual design. While in frontend development the output is usually the visual part, it’s not the job of a frontend developer to create the actual design. His/her role is to translate a design into code. Visual Design
  14. Frontend Development With the growth and rapid development in the

    frontend languages, frontend developers roles extended to include: • Web accessibility • Performance optimization • Search engine optimization • Focus on JavaScript • Implementing features with consideration to the user experience • Writing markup for HTML emails
  15. None
  16. Backend Development It’s the part of web development concerned with

    the logic. It’s responsible for storing information added by the user of a system and the retrieval of data requested by users. It connects all the dots together.
  17. Backend Languages Unlike frontend, the languages to develop the backend

    component of web applications are not limited. Most of the languages have similar features, some excel in certain type of tasks than others.
  18. Backend Frameworks During development, we usually lean more on using

    frameworks to handle common problems, cases and other stuff like security. Frameworks also force the developer to follow certain patterns and take certain decisions on behalf of the developer. This enable the developers to spend more time worrying about the problems they are trying to resolve rather the application architecture and code structure
  19. Data storage Data storage is an important part of backend

    development. It is used to help you store and retrieve different types data that you need. In general, databases are classified into Relational and Non relational database systems. Commonly also referred to SQL vs NoSQL databases. Both have pros and cons and specific use cases. SQL vs. NoSQL Databases: What’s the Difference?
  20. Relational vs Non-Relational DBMS

  21. Data storage • How to efficiently model your data •

    ACID properties • SQL language rather than ORM • Database normalization • How indexing work • Database transactions • Storage procedures • Data replication • Sharding Strategies When you’re working with databases it’s important to understand and focus on the following principles:
  22. Communication between Frontend & Backend It became so popular to

    separate the backend logic from the views and switching to asynchronous requests that respond with data only rather than its view (e.g HTML). This helps the developers to use the same APIs to serve any consumer without additional work. Examples: • RESTFul APIs • GraphQL • JSON APIs
  23. Scalability and Caching As your application grow and your users

    adoption increase, you start taking new measures and strategies to improve the performance of your applications through: • Application profiling and identification of bottle necks • Using different caching strategies like using CDNs • Decrease database hits by using in memory cache like Redis
  24. Integration with other services When you start to move to

    microservices or start integrating with other 3rd party services, new patterns emerge to facilitate that like message brokers and queue (RabbitMQ and Kafka)
  25. Server Administration & Management Although this is now commonly a

    job of a system administrator, Devops engineers; basic understanding of working with Linux environments and administration is important and often required for backend developers. In addition to web application server management like Apache, Nginx … etc
  26. These topics are shared between frontend and backend developers. General

    topics
  27. Anatomy of HTTP

  28. General software engineering principles DRY / DIE: Don't Repeat Yourself

    (DRY) or Duplication is Evil (DIE) KISS: Keep it simple, Stupid! SOLID: Group of principles when applied together intends to make a system easy to maintain and extend over time
  29. None
  30. Debugging network operations

  31. Web security OWASP is a project dedicated to highlight the

    common vulnerabilities in web applications. A web developer should be familiar at least with the top 10 OWASP vulnerabilities and have the sufficient knowledge to test, patch and avoid these vulnerabilities.
  32. Version Control

  33. Containerization Due to the rise in complexity of both development

    and deployments, tools like containers can be used to facilitate the setup of the development and production environments. Docker offers great benefit when it comes to this area
  34. And this is not everything …

  35. How to keep up to date – Conferences Follow industry

    conferences. Most of the conferences are either streamed for free or added later on YouTube. You can find a list of upcoming and past conferences at: https://confs.tech/
  36. How to keep up to date – Podcasts Podcasts are

    like radio programs you can listen to when you’re working, commuting … anything. It open your eyes on different topics and usually has interesting guests who share their thoughts on different topics; This repository contain a list of interesting podcasts in technology grouped by language, category, language .. https://github.com/rShetty/awesome-podcasts
  37. None
  38. How to keep up to date – Books Books are

    great references as they fill the gabs in your knowledge. Always check book reviews on services like Amazon if you decided to read one. In collaboration with EKB, Apress publishing house offer free books in different formats for Egyptian residents if you’re accessing their website from Egypt
  39. None
  40. How to keep up to date – YouTube

  41. Roadmap

  42. Questions? `