Dlaczego w TEONITE budujemy rozwiązania Open Source?

Programowanie to nasza pasja. To ona napędza nas do tworzenia narzędzi, usprawniających nasz proces twórczy. Dlatego niemal każde z tych rozwiązań chętnie publikujemy w wersji Open Source i pozwalamy społeczności na ich użytkowanie i modyfikację.

Problem? Czyli dlaczego budujemy gotowe rozwiązania Open Source

Niejednokrotnie podczas pracy nad projektem spotykaliśmy się z sytuacją, w której brakowało nam jakiegoś narzędzia, albo te już dostępne, (które byliśmy w stanie odszukać) nie spełniały naszych oczekiwań. Idealnym przykładem na to, był projekt dla jednej z największych wytwórni filmowych, podczas którego mieliśmy okazję zmierzyć się z zadaniami dość specyficznymi, lecz nie unikatowymi, np. integracją z narzędziami analitycznymi Google, m.in. Google Tag Managerem.

Mimo, że problem wydaje się dość prosty, nie mogliśmy znaleźć biblioteki, która w prosty sposób realizowałaby te zadania i byłaby jednocześnie “Reactowa”. Podążając z duchem OpenSource, zamiast tworzyć jednorazowe rozwiązanie, postanowiliśmy zbudować odpowiednią bibliotekę i udostępnić ją publicznie na GitHub.

Biblioteka react-simple-gtm

Brakowało nam logicznej, nieskomplikowanej i dobrze działającej integracji Google Tag Managera ze stroną/aplikacją działającą w React. Każda z dotychczasowych bibliotek wydawała mi się zbyt skomplikowana do konfiguracji, lub zbyt nachalna w sposobie użytkowania. Inspiracją do jej zbudowania była biblioteka react-intl, która bazuje na Provider’ach i Inject’ach, dzięki czemu bardzo wygodnie korzysta się z niej przy tworzeniu komponentów.

W react-simple-gtm proces dodawania tagów jest mało skomplikowany:

  • na początku budujemy tag providera, czyli inicjujemy system zarządzania tagami swoim Google Tag ID.
import TagProvider from 'react-simple-google-tag-manager';

//...

ReactDOM.render(  
    // ... other providers
    <TagProvider gtmId="<your_tracking_id">
        // your application or router
    </TagProvider>
    // ...
    , 
    document.getElementById('root'),
);
  • używając injectTag “wstrzykujemy” go do każdego komponentu, w którym potrzebujemy Google Tag Managera.
import {injectTag} from 'react-simple-google-tag-manager';  
export default injectTag(MyAwesomeComponent);  
  • jako dodatkowy property w komponencie otrzymujemy obiekt tag, którego metoda push pozwala na wysyłanie google tag eventów.
import {tagShape} from 'react-simple-google-tag-manager';

const MyAwesomeComponent = ({tag}) => (  
    <button onClick={() => tag.push('event', 'click_me_btn_clicked')}>
        Click Me
    </button>
)

MyAwesomeComponent.propTypes = {  
    tag: tagShape,
}

Nasza baza Open Source wciąż rośnie

Na dzień dzisiejszy z naszej produkcji wyszło kilkadziesiąt aplikacji Open Source. Najnowsze z nich, oprócz tych opisanych powyżej, to m.in. biblioteki do konwersji plików “json” do “po” i “po” do “json”.

Ponadto, trwają prace nad wypuszczeniem kolejnych bibliotek, o których na pewno usłyszycie.
Jeśli chcecie dowiedzieć się więcej o innych naszych inicjatywach open source, koniecznie zobaczcie:

Koszulki Open Source

satNOGS

Inspectr

lub odwiedźcie nasz profil na GitHub.

Zachęcam was także do obejrzenia LIVE na temat Open Source, który opublikowaliśmy na naszym profilu na Facebooku:

click to subscribe
hire us

Let’s talk about Mobile Apps

We’d love to design, develop and release them for you.

Highest DevOps Standards

Our team wield the right skills to make things work.

Angular magic in the making

Most flexible development technology for stunnig results.

Web Apps cooked the right way

The ultimate combination of code, design and user experience.

Django REST Framework

TEONITE develops, supports and donates open source projects.